Knockoutjs使用多个视图模型

flu*_*ent 13 jquery-mobile knockout.js

我试图让Knockout js使用jQueryMobile,并且在页面之间移动时遇到一些问题.

我想尝试在JQM中保持页面转换,因此我想使用多页面选项(在一个html文件中定义多个页面)或将其他页面加载到DOM中,详见默认的AJAX行为部分.文档.

JQM页面转换文档

我有两个单独的Knockoutjs页面,每个页面都有一个单独的视图模型.这两个页面都完美无缺,直到我尝试通过JQM将它们链接在一起.

无论我尝试加载哪个页面,我都会收到与其他页面上的映射相关的错误.我只能假设两个页面都加载到单个DOM中,当Knockout应用绑定时,它正在寻找不存在的属性.

我试图让一个jsFiddle来证明这一点.

JQM - Knockout Fiddle

我是JQM和Knockout的新手,所以任何帮助表示赞赏.如果我采取完全错误的方法,那么我将感谢有人指出我正确的方向.

我是否会更好地尝试在整个网站上使用一个ViewModel?如果不是,我如何在JQM中使用Knockoutjs?

Jud*_*ngo 22

整个站点的一个"主"视图模型是可以接受的.然后,你可以做这样的事情:

var masterViewModel = {
   viewModelOne: ...,
   viewModelTwo: ...
}
Run Code Online (Sandbox Code Playgroud)

或者,您可以调用.applyBindings重载来将绑定应用于单个元素,而不是整个DOM:

ko.applyBindings(new modelOne("Test", "One"), $("#one")[0]);
ko.applyBindings(new modelTwo("Test", "Two"), $("#two")[0]);
Run Code Online (Sandbox Code Playgroud)

就个人而言,我建议采用第二种方法.

  • 当然,可能存在性能开销,因为在显示该页面之前,您不需要在第二页上应用绑定.为了抵消这种情况,您可以尝试仅在第二个"页面"加载时为第二个div调用.applyBindings. (2认同)