当我使用动态html两次applyBindings时,Knockout会变得疯狂 [英] Knockout goes crazy when I applyBindings twice with dynamic html
本文介绍了当我使用动态html两次applyBindings时,Knockout会变得疯狂的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用淘汰赛创建单页应用程序...
I am creating a single page application with knockout ...
我有一个GlobalViewModel来管理所有动态页面(我通过ajax获取html)。
I have a GlobalViewModel to admin all dynamic pages (I get the html via ajax).
以下是我的问题示例:
当我加载相同模板2次时(在显示模板中单击2次)敲门变得疯狂并重复数据...如果检查可观察数组,则没有重复数据。
When I load 2 times the same template (click 2 times in "show template") knockouts goes crazy and duplicate data... if you check the observable Array, there's no duplicated data.
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"));
推荐答案
清理原始的'容器'似乎有效。
Cleaning the original 'container' seems to work.
self.showView = function(){
...
...
ko.cleanNode(document.getElementById("container"));
ko.applyBindings(window.gvm, document.getElementById("container"));
.....
}
这篇关于当我使用动态html两次applyBindings时,Knockout会变得疯狂的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文