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が 1 回だけ呼び出されることを覚えておく必要があります。したがって、バインディングは、applyBindings が呼び出された時点で存在するプロパティに 1 回だけ適用されます。後でビューモデルにプロパティを追加するとき、それらは自動的にデータ バインディングにバインドされません。

この例を機能させるには、apply bindings を呼び出すときにすべてのプロパティが存在するように、ビュー モデルを再考する必要があります。

編集http://jsfiddle.net/photo_tom/Bru5a/5/ で私が話していたことを示すためにあなたのフィドルを編集しました

于 2012-11-30T02:45:46.127 に答える