我正在使用以下内容:
- knockout-2.1.0.js
- koExternalTemplateEngine_all.js
我要实现的目标如下:
- 模板容器加载外部 HTML 并为该 HTML 加载特定的 VM(有效)。
- 模板容器加载/切换到另一个外部 HTML,以及该 HTML 的其他特定 VM(有效)。
- 模板容器切换回第一个模板/VM,连同他们的 VM(不起作用!)。
我猜它不起作用的原因是因为模板在 VM 之前加载(它确实给我绑定(bind)错误)。
我网站的结构是这样的(不包括上面提到的库):
index.html
(包含模板容器)js/script.js
(包含主要的 ViewModel)js/firstvm.js
(持有第一个 ViewModel)js/secondvm.js
(持有第二个 ViewModel)tmpl/firstvm.html
(第一个 VM 的模板)tmpl/secondvm.html
(第二个虚拟机的模板)
Or simply download the source and view the problem.
最重要的部分:
index.html
<button data-bind="click: loadFirstPage">Load first page + ViewModel</button> <button data-bind="click: loadSecondPage">Load second page + ViewModel</button> < hr /> <div data-bind="template: { name: function() { return currentTemplate(); }, data: currentData }"></div>
脚本.js
function IndexViewModel() { var vm = this; this.currentTemplate = ko.observable(); this.currentData = ko.observable(); this.loadFirstPage = function() { vm.currentTemplate("firstvm"); vm.currentData(new FirstViewModel()); }; this.loadSecondPage = function() { vm.currentTemplate("secondvm"); vm.currentData(new SecondViewModel()); }; this.loadFirstPage(); }; ko.applyBindings(new IndexViewModel());
firstvm.html
<p data-bind="text: displayValue"></p>
secondvm.html
<p data-bind="text: displayValue2"></p>
firstvm.js
function FirstViewModel() { this.displayValue = ko.observable("Text from firstvm.js"); };
secondvm.js
function SecondViewModel() { this.displayValue2 = ko.observable("Text from secondvm.js"); };
我希望有人能帮我解决这个问题。提前致谢!
附言。忘记提及:当按下“第一页”按钮两次时,它似乎确实有效(可能是因为加载了正确的 VM)。
最佳答案
所以看起来问题是名称和数据需要同时更改,这样模板就不会绑定(bind)到尚不存在的 View 模型。有几种方法可以解决这个问题。一种是加载模板并保留它们,但您可以像这样继续重新加载它们:
模板绑定:
<div data-bind="template: {name: currentTemplate().name(),
data: currentTemplate().data() }"></div>
View 模型:
function TemplateViewModel(name, data) {
this.name = ko.observable(name);
this.data = ko.observable(data);
};
function IndexViewModel() {
var vm = this;
this.currentTemplate = ko.observable();
this.loadFirstPage = function() {
vm.currentTemplate(new TemplateViewModel("firstvm", new FirstViewModel()));
};
this.loadSecondPage = function() {
vm.currentTemplate(new TemplateViewModel("secondvm", new SecondViewModel()));
};
this.loadFirstPage();
};
ko.applyBindings(new IndexViewModel());
我测试了这个,它有效。您可能想稍微调整一下,但您明白了。
关于javascript - Knockout.js 多个外部模板和多个 VM 切换失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11741287/