Knockoutjs与多种视图模型一起工作

我正在尝试使用jQueryMobile获取Knockout js，并在页面之间移动时遇到一些问题。Knockoutjs与多种视图模型一起工作

我想尝试在JQM中保持页面转换，因此我想要使用多页面选项（在一个html文件中定义多个页面）或将其他页面加载到DOM中，如默认AJAX行为部分的文档。

JQM Page Transition Documentation

我有两个单独的Knockoutjs页面上每个独立的视图模型的工作都。这两个页面都能正常工作，直到我试图通过JQM将它们连接在一起。

无论页我尝试加载我得到与其他页面上的映射错误。我只能假设这两个页面都加载到单个DOM中，并且当Knockout应用绑定时，它正在查找不存在的属性。

我试图让一个jsFiddle来演示这一点。

JQM - Knockout Fiddle

我是新来的都JQM和淘汰赛，所以任何帮助表示赞赏。如果我完全采取错误的做法，那么我会很感激有人指着我朝着正确的方向前进。

我会更好地尝试使用一个ViewModel的整个网站？如果没有，我怎么能用JQM使用Knockoutjs？

来源

2012-01-09 fluent

谢谢贾斯珀。真的有帮助..... – fluent 2012-01-09 22:13:20

嗯贾斯珀，谷歌搜索把我带到这里。 – 2013-01-22 13:18:02

我以为lmgtfy不是回答SO，Jasper问题的方法吗？ – Illuminati 2013-01-27 14:04:34

整个网站的一个“主”视图模型是可以接受的。然后，你可以做这样的事情：

var masterViewModel = { 
    viewModelOne: ..., 
    viewModelTwo: ... 
}

或者，你可以调用.applyBindings超载绑定适用于单个元素，而不是整个DOM：

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

个人而言，我推荐第二种方法。

来源

2012-01-09 22:03:17

好东西。这是否有任何性能影响，因为我似乎在创建和绑定完全不必要的视图模型？ – fluent 2012-01-09 22:06:33

如果其他人感兴趣，更新小提琴。 http://jsfiddle.net/npJZM/10/ – fluent 2012-01-09 22:08:02

当然，可能会有性能开销，因为在显示该页面之前无需在第二页上应用绑定。为了弥补这一点，你可以尝试仅在加载第二个“页面”时为第二个div调用.applyBindings。 – 2012-01-09 22:08:28

我目前使用jQuery Mobile的1.3.1和2.2.1淘汰赛，并试图找到（希望）永久地解决了这个问题之前，许多方法。困难的部分是当申请绑定。当我使用jQuery的ready函数时，这没有用。我在jQM documentation中发现绑定了pageinit事件回调，而不是文档就绪函数。但是，每次调用时，都会触发此回调首次呈现页面，因此如果您有5个jQM页面，则可能会关闭5次，并且您只应用一次KO绑定。

我最终使用的解决方案是以下几点：

$(document).bind('pageinit', function (e) { 
    var pageId = e.target.id; 

    for (var i in VIEW_MODELS) { 
     var vm = VIEW_MODELS[i]; 
     if (pageId == vm.View) { 
      ko.applyBindings(vm, document.getElementById(vm.View)); 
     } 
    } 
});

这是什么东西做的是每一个JQM页面最初呈现时，它会搜索我的视图模型找到与即将到来的视图相关联的视图模型并应用绑定。由于页面只在第一次渲染时被初始化，所以它会在第一次渲染时应用ko绑定，而不会再次渲染。

到目前为止，这是为我工作，但我很好奇听听别人的意见或解决方案使用JQM多页模板和淘汰赛。

来源

2013-04-30 16:16:38

Knockoutjs与多种视图模型一起工作

回答

相关问题