CODEWITHSUNDEEP
javascriptknockout.js
Michael Falck Wedelgård
Michael Falck Wedelgård

Reputation: 3193

knockout js data-bind child in object

I've tried for some time now to figure out how to data-bind a child in an object in Knockout js. I hope someone can help me solve this :)

I want to display the obj.externalLinks.facebook. I can't figure out how to data-bind it. This is what I have:

Model:

var obj = ko.observable();

var data = {    "id" : 1,
    "itemName" : "item name",
    "price": 250,
    "ticketLink" : "http://google.com",
    "externalLinks" : [
        { "homePage" : "http://google.com" },
        { "mySpace" : "http://myspace.com" },
        { "facebook" : "http://facebook.com" },
        { "wikipedia" : "http://en.wikipedia.org/" },
        { "facebookEventPage" : "http://facebook.com" }
        ]
    }

obj(data);

ko.applyBindings(obj)

View:

<h1 data-bind="text: externalLinks[2]"></h1>

I know the data-bind part is wrong, but how do I do it? :(

Upvotes: 1

Views: 419

Answers (1)

GSerjo
GSerjo

Reputation: 4778

Try this one

Html

<span data-bind="text: link('facebook')"></span>

JavaScript

var data = {    "id" : 1,
    "itemName" : "item name",
    "price": 250,
    "ticketLink" : "http://google.com",
    "externalLinks" : [
        { "homePage" : "http://google.com" },
        { "mySpace" : "http://myspace.com" },
        { "facebook" : "http://facebook.com" },
        { "wikipedia" : "http://en.wikipedia.org/" },
        { "facebookEventPage" : "http://facebook.com" }]
    };

var ViewModel = function(rawData){
    var self = this;
    var data = rawData;

    self.link = function(linkKey){
        for (var i=0; i<data.externalLinks.length; i++){
            var item = data.externalLinks[i];
            if(item[linkKey]){
                return item[linkKey];
            }
        }
    };    
};

ko.applyBindings(new ViewModel(data));

So you can bind to the link by linkKey

jsfiddle sample

Upvotes: 0

Related Questions