1

我有一个类似于将文本绑定到子对象的属性的问题，我很难为子对象正确创建 KO 可观察对象。

例如，我执行 HTTP Get 以返回 People 的 JSON 数组，而 People 数组位于名为“payload”的属性内。我可以让基本绑定工作，并在有效负载属性上执行 foreach，显示每个人的属性；但是，我需要做的是为每个人添加一个“状态”属性，该属性是从不同的 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）使“状态”成为可观察的

帮助！

[更新] 根据丹的回答编辑工作修复：

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 还很陌生，并且非常欢迎对刷新功能进行改进。映射仍在每次重新应用。

4

1 回答 1

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]));
}
于 2013-08-16T19:39:28.963 回答