在Knockout中实现菜单-在具有不同viewModels的视图之间切换

Question

本质上，我正在尝试实现RobN的极其简单的模板切换器http://jsfiddle.net/rniemeyer/XYz8M/，它使用“模板”数据绑定。

   (---SO wants code here - see fiddle for complete code---)
   <div id="templateContent" data-bind='template: { name: currentView() }'></div>

   var viewModel = {
      currentView: ko.observable("template-1"),
      toggleView: function() {
       this.currentView(this.currentView() === "template-1" ? "template-2" : "template-1");   
     }
  };

  ko.applyBindings(viewModel);

我见过很多其他简单的例子来做这件事，所有的例子都对每个加载的模板使用相同的viewModel类。例外-RobN的SamplePresentation应用程序(我没有足够的代表点来发布另一个链接)，虽然非常令人印象深刻，但我发现很难连接到我的noobie体验。我想他是在他的section.activate()方法中这样做的，但我不清楚。

我想在一个真实的应用中使用这个概念，但是有绑定上下文的问题。下面是我正在尝试做的事情：http://jsfiddle.net/jockor/DSEDh/4/

   This line intentionally left blank (please see fiddle vs. mangling code here)

基本上，当一个导航链接/按钮被按下时，我只是想用另一个模板替换掉正文内容面板。该模板将需要有自己的viewModel支持的自己的数据。

上面的小提琴是我对这个概念的一个简化版本--只是尝试在猫和狗面板之间切换。我遇到的是绑定到'template‘数据绑定的数据用于加载的猫/狗模板。

有人能告诉我，我这样做是否正确，或者我是否滥用了“模板”绑定概念？

Answer 1

我已经修改了你的jsfiddle来工作：

http://jsfiddle.net/5rmAL/2/

您还需要切换模板绑定的data字段。您只是切换了模板名称，我可以从您的代码中看出，您也在寻找一种方法来更改视图模型数据。因此，我粗略地实现了它，以便在切换名称时将数据从viewModel切换到viewModel。有更好的方法可以做到这一点，但jsfiddle只是为了演示。

通过更改data，您可以修改模板指向的内容以获取其数据。通过使其可见，我能够获得它指向switch的数据。我上面的简单实现使用了一个简单的对象，该对象同时保存了可观察对象中的模板名称和数据。由于模板的名称和数据必须同时切换，因此我更新了可观察对象内的对象中的值，然后手动告诉可观察对象其值已更改。如果您更改模板名称之前的数据，它将尝试绑定以前的模板。同样，如果您更改数据之前的名称，它将尝试将旧数据绑定到新模板。因此，为了做到这一点而不会因为重新绑定模板时找不到变量和东西而失败，您需要确保在更改模板名称和要指向的数据之前，template绑定不会以某种方式更新。

编辑:我注意到在敲出绑定中有一个函数处理程序，它将$data作为第一个参数传递给函数。Knockout总是在第一个地方将$data作为第一个参数传递给函数，所以我用....goto (... = function () { ....goto($data); } )替换了你的....goto。这只是一个辅助节点(甚至不需要对您的函数签名进行任何修改)。