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是你的 observables 将被新的 observables 替换。为了澄清，Summary作为 observableArray 的 将被替换为新的 observableArray ko.mapping。

有两种方法可以解决这个问题。第一种选择是等待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。备选方案 1 在调用之前会导致延迟ko.applyBindings，这可能会导致一些 UI 闪烁（并且可能会看到不需要的元素等）。

于 2012-11-14T15:15:20.610 回答