javascript - 使用 KnockoutJS，如何绑定(bind)到数组项的子属性

Question

我有一个类似于 Bind text to property of child object 的问题我很难为子对象正确创建 KO 可观察对象。

例如，我执行 HTTP Get 来返回 People 的 JSON 数组，而 People 数组位于名为“payload”的属性内。我可以使基本绑定(bind)正常工作，并对有效负载属性执行 foreach，显示每个人的属性；但是，我需要做的是向每个 Person 添加一个“status”属性，该属性是从不同的 JSON 接收的，例如

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

我尝试绑定(bind)到 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);
});

我需要 2 件重要的东西: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 还是个新手，非常欢迎刷新功能的改进。每次仍然会重新应用映射。

Answer 1

您需要定义一个可观察数组，然后将数据插入其中。

elem.status = ko.observableArray();

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

我无法通过示例说出数据的完整结构。但如果 status 是一个复杂的对象，您可能会为其提供自己的模型。

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