Knockout geht verrückt, wenn ich applyBindings zweimal mit dynamic html
Erstelle ich eine single page application mit ko ...
Ich habe eine GlobalViewModel admin alle dynamischen Seiten (bekomme ich die html per ajax).
Hier ist ein Beispiel für mein problem:
Wenn ich es lade 2 mal die gleiche Vorlage (klicken Sie 2 mal in "show template") knockouts verrückt und doppelte Daten... wenn man sich mal die observable-Array, es gibt keine doppelten Daten.
HTML:
<div id="container">
<button data-bind="click: showView">show template</button>
<div data-bind="html: templateHtml"></div>
</div>
Skript:
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"));
Du musst angemeldet sein, um einen Kommentar abzugeben.
Reinigung das original "container" scheint zu funktionieren.
http://jsfiddle.net/zWtrr/8/