我无法使用淘汰赛迭代我的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不适合我。 非常感谢!!
答案 0 :(得分:1)
ko.mapping
的问题是你的observable将被新的observable替换。为了澄清,Summary
是一个observableArray,将由ko.mapping
替换为新的observableArray。
有两种方法可以解决这个问题。第一种方法是等待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是使用初始(空)数据引导viewmodel。如果在空数组上应用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闪烁(并且可能会显示不需要的元素等)。