javascript - knockout 对象中的js数据绑定(bind)子对象

Question

我已经尝试了一段时间来弄清楚如何在 Knockout js 中对对象中的子对象进行数据绑定(bind)。我希望有人能帮我解决这个问题:)

我想显示 obj.externalLinks.facebook。我不知道如何对其进行数据绑定(bind)。这就是我所拥有的:

型号:

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)

查看:

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

我知道数据绑定(bind)部分是错误的，但我该怎么做呢？ :(

Answer 1

试试这个

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));

这样就可以通过linkKey绑定(bind)到link

jsfiddle样本