Knockout映射插件无法正确处理分层数据

时间:2012-11-29 17:50:05

标签: memory-leaks knockout.js hierarchical-data knockout-mapping-plugin

  • 我的分层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();
        });
    });​

1 个答案:

答案 0 :(得分:0)

在你的情况下发生的事情是,淘汰赛表现得像设计的那样。

要查看发生了什么,请在外部div中添加以下行

<div data-bind="text: ko.toJSON($root)"></div>

您可以查看视图模型中绑定的内容。

要了解正在显示的内容,请在选择不同的链接时观察viewmodel发生的情况。在更新模型时,您将看到一旦创建了属性,它就会保留在那里。这是设计映射器的工作原理。

接下来,您必须记住ko.applyBindings仅被称为 ONE 时间。因此,绑定仅应用于调用applyBindings时存在的属性。稍后向viewmodel添加属性时,它们不会自动绑定到数据绑定。

要使此示例正常工作,您需要重新考虑视图模型,以便在调用应用绑定时存在所有属性。


修改 我编辑了你的小提琴,以显示我在http://jsfiddle.net/photo_tom/Bru5a/5/

所说的内容