我的分层JSON结构在服务器端的每个新JSON之后都有所不同。鉴于我的模板,这不足以显示模型更新。 排除故障后,我注意到映射插件没有正确映射子元素(或者我做错了)
我还可以跟踪数据模型中每次更新的内存不断增长。
非常感谢任何帮助。
这个简单的测试取决于JSFiddle http://jsfiddle.net/Bru5a/1/
这是我的观点
<div id="view">
The behavior is different depending on the order you load the model.
<a href="#" id="first">First</a>
<a href="#" id="second">Second</a>
<a href="#" id="third">Third</a>
<span data-bind="text: name"></span>
<div data-bind="if: $data.child">
<b data-bind="text: child.name"></b>
<div data-bind="if: child.sub">
<b data-bind="text: child.sub.name"></b>
</div>
</div>
</div>
这是我的Javascript:
var BaseModel = function(om) {
ko.mapping.fromJS(om, {}, this);
};
var resourceModel = null;
function applyJson(json) {
try {
if(resourceModel){
ko.mapping.fromJS(json, {} ,resourceModel);
} else {
resourceModel = new BaseModel(json);
ko.applyBindings(resourceModel, $("#view")[0]);
}
} catch(e) {
alert(e);
}
}
function loadFirst() {
var json = { "name" : "1",
"child" : {
"name": "Child One"
}
};
applyJson(json);
}
function loadSecond() {
var json = { "name" : "2" };
applyJson(json);
}
function loadThird() {
var json = { "name" : "3",
"child" : {
"name": "Child Three",
"sub" : {
"name" : "Third Sub Child"
}
}
};
applyJson(json);
}
$(document).ready(function () {
$("#second").click(function(){
loadSecond();
});
$("#third").click(function(){
loadThird();
});
$("#first").click(function(){
loadFirst();
});
});
答案 0 :(得分:0)
在你的情况下发生的事情是,淘汰赛表现得像设计的那样。
要查看发生了什么,请在外部div中添加以下行
<div data-bind="text: ko.toJSON($root)"></div>
您可以查看视图模型中绑定的内容。
要了解正在显示的内容,请在选择不同的链接时观察viewmodel发生的情况。在更新模型时,您将看到一旦创建了属性,它就会保留在那里。这是设计映射器的工作原理。
接下来,您必须记住ko.applyBindings仅被称为 ONE 时间。因此,绑定仅应用于调用applyBindings时存在的属性。稍后向viewmodel添加属性时,它们不会自动绑定到数据绑定。
要使此示例正常工作,您需要重新考虑视图模型,以便在调用应用绑定时存在所有属性。
修改强> 我编辑了你的小提琴,以显示我在http://jsfiddle.net/photo_tom/Bru5a/5/
所说的内容