1

本质上,我正在尝试实现 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 KO 体验。我认为他是在他的 section.activate() 方法中这样做的,但是,我不清楚。

我想在一个真正的应用程序中使用这个概念,但是有绑定上下文问题。这是我想要做的:http: //jsfiddle.net/jockor/DSEDh/4/

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

基本上,当按下导航链接/按钮时,我只想将正文内容面板换成另一个模板。该模板将需要由其自己的视图模型支持的自己的数据。

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

有人可以告诉我我是否正确执行此操作,或者我是否在滥用“模板”绑定概念?

4

1 回答 1

1

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

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

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

通过改变data您可以修改模板指向的内容以获取其数据。通过使那个可观察的,我能够拥有它指向开关的数据。我上面的快速粗略实现使用了一个简单的对象,该对象在 observable 中保存模板名称和数据。由于模板名称和数据要同时切换,所以我更新了 observable 内部对象中的值,然后手动告诉 observable 其值发生了变化。如果更改模板名称之前的数据,它会尝试绑定之前的模板。同样,如果您更改数据之前的名称,它将尝试将旧数据绑定到新模板。因此,为了做到这一点而不会因为在重新绑定模板时找不到变量和东西而崩溃,您需要以某种方式确保您的template在您完成更改模板名称和要指向的数据之前,绑定不会更新。

编辑:我注意到您的淘汰赛绑定中有一个函数处理程序,它将 $data 作为第一个参数传递给函数。Knockout 总是首先将 $data 作为第一个参数传递给函数,所以我function () { ....goto($data); }....goto(... = stuff) 替换了你的。这只是一种侧节点(甚至不需要对您的函数签名进行任何修改)。

于 2013-04-25T16:08:11.627 回答