Нокаут сходит с ума, когда я дважды применяю привязки с динамическим html

Я создаю одностраничное приложение с нокаутом...

У меня есть GlobalViewModel для администрирования всех динамических страниц (я получаю html через ajax).

Вот пример моей проблемы:

http://jsfiddle.net/zWtrr/7/

Когда я загружаю 2 раза один и тот же шаблон (нажмите 2 раза в «показать шаблон»), нокауты сходят с ума и дублируют данные ... если вы проверите наблюдаемый массив, дублированных данных нет.

HTML:

<div id="container">
    <button data-bind="click: showView">show template</button>
    <div data-bind="html: templateHtml"></div>
</div>

Скрипт:

function GlobalViewModel(){
    var self = this;
    self.templateHtml = ko.observable();
    self.templateVM = ko.observable();

    self.showView = function(){
        //i get this html from ajax
        var pageHtml = "<div id='template' data-bind='with: templateVM'>"+
            "<button data-bind='click: showAll'>All</button>" +
            "<button data-bind='click: showNames'>Names</button>" + 
            "<button data-bind='click: showLastNames'>LastNames</button>" +
            "<button data-bind='click: showNickNames'>NickNames</button>" +
            "<ul data-bind='foreach: resultsToShow'>" +
            "    <li data-bind='text: $data'></li>" +
            "</ul>" +
            "</div>";
        self.templateHtml(pageHtml)
        self.templateVM(new ViewModel())
        ko.cleanNode(document.getElementById("template"))
        ko.applyBindings(window.gvm, document.getElementById("template"));
    }

}
function ViewModel(){
    var self = this;
    self.selected = ko.observable("All");
    self.resultsToShow = ko.observableArray([]);
    self.result1 = ["Facu", "Feli", "Juli"];
    self.result2 = ["Perez","Gonzales","Garcia"];
    self.result3 = ["Piti", "Tito", "Gato"];

    self.showAll = function (){
        self.resultsToShow(self.result1.concat(self.result2,self.result3));
        self.selected("All");
    }

    self.showNames = function (){
        self.resultsToShow(self.result1);
        self.selected("Names");
    }

    self.showLastNames = function (){
        self.resultsToShow(self.result2);
        self.selected("LastNames");
    }

    self.showNickNames = function (){
        self.resultsToShow(self.result3);
        self.selected("NickNames");
    }
    self.showAll();
}
window.gvm = new GlobalViewModel();
ko.applyBindings(window.gvm, document.getElementById("container"));

person Facundo Pedrazzini    schedule 12.03.2013    source источник


Ответы (1)


Очистка оригинального «контейнера», кажется, работает.

    self.showView = function(){
    ...
    ... 
        ko.cleanNode(document.getElementById("container"));
        ko.applyBindings(window.gvm, document.getElementById("container"));
    .....
  }

http://jsfiddle.net/zWtrr/8/

person DotNetWala    schedule 12.03.2013
comment
Это решение вызывает у меня еще одну проблему, проверяйте jsfiddle.net/zWtrr/12 каждый раз, когда я нажимаю кнопка показывает шаблон, функции globalviewmodel дублируют их поведение - person Facundo Pedrazzini; 12.03.2013
comment
это проблема эксклюзива jsfiddle... этот ответ работает в моем проекте! - person Facundo Pedrazzini; 12.03.2013
comment
Это было действительно полезно! Спасибо! - person BenjiFB; 07.01.2015