使用KnockoutJS,如何绑定到数组项的子属性

时间:2013-08-16 18:31:10

标签: javascript knockout.js knockout-mapping-plugin

我有一个类似于Bind text to property of child object的问题,我很难为儿童对象正确创建KO observable。

例如,我执行HTTP Get以返回People的JSON数组,而People数组位于名为“payload”的属性中。我可以使基本绑定工作,并在有效负载属性上做一个foreach,显示每个Person的属性;但是,我需要做的是为每个Person添加一个“status”属性,该属性是从不同的JSON接收的,例如

/api/people  (firstname, lastname, DOB, etc.)
/api/people/1/status   (bp, weight, height, etc)

我已尝试绑定到status.bp和status()。bp,但没有运气。

js例子:

var TestModel = function (data) {
var len = data.payload.length;

for (var i = 0; i < len; i++) {

    var elem = data.payload[i];
    var statusdata = $.getJSON("http://localhost:1234/api/people/" + elem.id + "/status.json", function (statusdata) {

        elem.status = statusdata;
        data.payload[i] = elem;

        });
    }
    ko.mapping.fromJS(data, {}, this);
};

var people;

var data = $.getJSON("http://localhost:1234/api/people.json", function (data) {

    people= new TestModel(data);
    ko.applyBindings(people);
});

我需要的两件重要事情: 1)正确通知KO“有效载荷”是一个用于键入ID属性的数组 2)使“状态”成为可观察的

帮助!

[更新]使用基于Dan的答案的工作修补编辑:

var TestModel = function(data) {
...
this.refresh = function () {
    $.getJSON("http://localhost:1234/api/people", function (data) {

        self.payload = ko.observableArray(); // this was the trick that did it.

        var len = data.payload.length;

        for (var i = 0; i < len; i++) {

            var elem = data.payload[i];

            $.getJSON("http://localhost:1234/api/people/" + elem.id + "/status", function (statusdata) {

                // statusdata is a complex object
                elem.status = ko.mapping.fromJS(statusdata);
                self.payload.push(elem);
            });
        }
    // apply the binding only once, because Refresh will be called with SetInterval
    if (applyBinding) {  
        applyBinding = false;
        ko.applyBindings(self);
    }
}

我还是Knockout的新手,欢迎对刷新功能进行改进。每次都会重新应用映射。

1 个答案:

答案 0 :(得分:1)

您需要定义一个可观察数组,然后数据推入其中。

elem.status = ko.observableArray();

for (var i = 0; i < statusdata.length; i++) {
    elem.status.push(statusdata[i]);
}

我无法通过示例说明数据的完整结构是什么。但是,如果状态是一个复杂的对象,那么您可以为其提供自己的模型。

for (var i = 0; i < statusdata.length; i++) {
    elem.status.push(new statusModel(statusdata[i]));
}