1

テキストを子オブジェクトのプロパティにバインドするのと同様の質問があり、子オブジェクトの KO オブザーバブルを適切に作成するのに苦労しています。

たとえば、People の JSON 配列を返すために HTTP Get を実行すると、People 配列は「payload」というプロパティ内にあります。基本的なバインディングを機能させ、ペイロード プロパティで foreach を実行して、各 Person のプロパティを表示できます。ただし、私がする必要があるのは、別の JSON から受け取った各 Person に「ステータス」プロパティを追加することです。例

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

私が必要とする2つの重要なこと：1）「ペイロード」がIDプロパティをキーにする配列であることをKOに適切に通知する 2）「ステータス」をオブザーバブルにする

ヘルプ！

[UPDATE] 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 を使い始めたばかりで、更新機能の改善は大歓迎です。マッピングは毎回再適用されます。

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 に答える