knockout js data-bind child in object

时间:2014-05-27 12:28:18

标签: javascript knockout.js

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

我想显示obj.externalLinks.facebook。我无法弄清楚如何对其进行数据绑定。这就是我所拥有的:

型号:

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>

我知道数据绑定部分是错误的,但我该怎么做? :(

1 个答案:

答案 0 :(得分:0)

试试这个

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

因此,您可以通过link

绑定到linkKey

jsfiddle示例