Плагин Knockout mapping неправильно обрабатывает иерархические данные

  • У меня есть иерархическая структура 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();
        });
    });​

memory-leaks hierarchical-data knockout.js knockout-mapping-plugin
person Veecharuva    schedule 29.11.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

В вашем случае происходит то, что нокаут ведет себя так, как задумано.

Чтобы увидеть, что происходит, добавьте следующую строку во внешний div

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

Вы можете видеть, что привязывается в вашей модели представления.

Чтобы понять, что отображается, следите за тем, что происходит с моделью просмотра, когда вы выбираете различные ссылки. Когда вы обновите свою модель, вы увидите, что после того, как свойство было создано, оно остается там. Это сделано специально для работы картографа.

Затем вы должны помнить, что ko.applyBindings вызывается только ONE раз. Следовательно, привязка применяется только один раз к свойствам, существующим на момент вызова applyBindings. Когда вы позже добавите свойства в свою модель просмотра, они не будут автоматически привязаны к привязкам данных.

Чтобы этот пример заработал, вам нужно будет переосмыслить свою модель представления, чтобы все свойства присутствовали в момент вызова привязок apply.

ИЗМЕНИТЬ Я отредактировал вашу скрипку, чтобы показать, о чем я говорю, на http://jsfiddle.net/photo_tom/Bru5a/5/

person photo_tom    schedule 30.11.2012
comment
Спасибо за ответ, как-то не складывается. Вы заявляете, что после того, как недвижимость была создана, она остается там - person Veecharuva; 07.12.2012
comment
Посмотрите пример 2 - jsfiddle.net/Bru5a/2 и пример 3 - jsfiddle.net/Bru5a/4. Теперь нажмите "Третий" и "Первый" в обоих примерах в двух окнах. Вы можете видеть, что результаты не совпадают. Я хотел бы указать, что в моем примере 3 используется массив JSON, и я использовал предложение Foreach. - person Veecharuva; 07.12.2012
comment
В другом примере попробуйте первую и третью ссылку. Вы можете заметить, что в примере 3 новые свойства привязываются автоматически (что противоречит При добавлении свойств к вашей модели представления позже, они не будут автоматически привязываться к привязкам данных.). Я не совсем уверен, что это объяснение верно. - person Veecharuva; 07.12.2012
comment
Я должен был приберечь скрипку для ответа, но, должно быть, слишком устал, чтобы делать это в то время. Для меня уже поздно, я соберу вам рабочий пример завтра или раньше в субботу утром. - person photo_tom; 07.12.2012