1

ノックアウトを使用して json データを反復処理するのに問題があります。私のビューモデルは次のようになります:

var ViewModel = function () {
    var self = this;
    self.Summary = ko.observableArray();
    $.getJSON('some api url', function(result) {
        ko.mapping.fromJS(result, {}, self);
    });
}
ko.applyBindings(new ViewModel());

私のJSONデータは次のようになります:

{
Summary: {
    Details: [
        {
            Name: "Foo",
            Id: 1,
            Detail: "Some Data"
        },
        {
            Name: "Bar",
            Id: 2,
            Detail: "Another Data"
        }
    ],
    SummaryOverview: "BlahBlah",
    AnotherObject: [
        {
            Name: "My Name"
            AnotherChildObject: [
                {
                    name:"some name"
                }
            ]
        }
    ]
}

私の質問は、この方法でデータを反復処理するかどうかです:

<div data-bind="foreach: Summary">             
    <div data-bind="text: Details.Detail"></div>
</div>

また

<div data-bind: "foreach: Summary.Details">
    <div data-bind="text: Detail"></div>
</div>

詳細を表示するにはどうすればよいですか? 上記の HTML が機能しません。どうもありがとうございました！！

4

1 に答える 1

1

問題ko.mappingは、オブザーバブルが新しいオブザーバブルに置き換えられることです。明確にするために、SummaryobservableArray である は、 によって新しい observableArray に置き換えられko.mappingます。

これを解決するには 2 つの方法があります。applyBindings最初の選択肢は、実際の配列が作成されるまで待機することです。

var ViewModel = function () {
    var self = this;
    // no need to set the array, it will be overwritten anyway
    // self.Summary = ko.observableArray();
}

var vm = new ViewModel();
$.getJSON('some api url', function(result) {
    ko.mapping.fromJS(result, {}, vm);
    ko.applyBindings(vm);
});

代替案 2 は、ビューモデルを初期 (空の) データでブートストラップすることです。ko.mapping空の配列に適用すると、次の呼び出しko.mappingで既存の配列が上書きされるのではなく更新されます。そのようです：

var ViewModel = function () {
    var self = this;
    var init = { Summary: [] };
    ko.mapping.fromJS(init, {}, self);

    $.getJSON('some api url', function(result) {
        ko.mapping.fromJS(result, {}, self);
    });
}

ko.applyBindings(new ViewModel());

私は通常、代替案 2 を使用します。代替案 1ko.applyBindingsでは、 が呼び出される前に遅延が発生し、UI のちらつきが発生する可能性があります (不要な要素が表示されるなど)。

于 2012-11-14T15:15:20.610 に答える