1

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

1 回答 1

0

在您的情况下发生的事情是淘汰赛的行为符合设计。

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

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

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

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

接下来，您必须记住 ko.applyBindings 只被调用一次。因此，绑定只应用于调用 applyBindings 时存在的属性一次。当您稍后将属性添加到视图模型时，它们不会自动绑定到数据绑定。

为了使这个示例工作，您需要重新考虑您的视图模型，以便在您调用应用绑定时所有属性都存在。

编辑 我已经编辑了你的小提琴，以展示我在http://jsfiddle.net/photo_tom/Bru5a/5/上所说的内容

于 2012-11-30T02:45:46.127 回答