Knockout.js多个外部模板和多个VM切换失败

Question

我正在使用以下内容:

• 淘汰赛2.1.0.js
• koExternalTemplateEngine_all.js

我想要实现的目标如下:

• 模板容器加载外部HTML并为该HTML加载特定的VM(正常).
• 模板容器加载/切换到另一个外部HTML,以及该HTML的其他特定VM(正常).
• 模板容器与其VM一起切换回第一个模板/ VM(不起作用!).

我猜它不起作用的原因,是因为模板在VM之前加载(它确实给我绑定错误).

我的网站结构如下(不包括上面提到的库):

• index.html (持有模板容器)
• js/script.js (持有主ViewModel)
• js/firstvm.js (拥有第一个ViewModel)
• js/secondvm.js (持有第二个ViewModel)
• tmpl/firstvm.html (第一个VM的模板)
• tmpl/secondvm.html (第二个VM的模板)

或者只需下载源代码并查看问题.

最重要的部分:

• 的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>
  

• 的script.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");
  };
  

我希望有人可以帮我解决这个问题.提前致谢!

PS.忘记提及:当按下"第一页"按钮两次时,它似乎确实有效(可能是因为加载了正确的VM).

Answer 1

所以看起来问题是名称和数据需要同时更改,因此模板不会绑定到尚未存在的视图模型.有几种方法可以解决这个问题.一个是加载模板并保留它们,但你可以像这样继续重新加载它们:

模板绑定:

<div data-bind="template: {name: currentTemplate().name(), 
                data: currentTemplate().data() }"></div>

视图模型:

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());

我测试了它,它的工作原理.你可能想稍微调整一下,但你明白了.