Knockoutjs 使用多个视图模型

Question

我正在尝试让 Knockout js 与 jQueryMobile 一起使用，但在页面之间移动时遇到了一些问题。

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

JQM 页面转换文档

我有两个单独的 Knockoutjs 页面，它们都可以使用每个都有一个单独的视图模型。两个页面都工作得很好，直到我尝试通过 JQM 将它们链接在一起。

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

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

JQM - Knockout Fiddle

我是 JQM 和 Knockout 的新手，因此感谢任何帮助。如果我采取了完全错误的方法，那么我会很感激有人指出我正确的方向。

我是否会更好地尝试对整个站点使用一个 ViewModel ？如果不是，我如何将 Knockoutjs 与 JQM 一起使用？

Answer 1

整个站点的一个“主”视图模型是可以接受的。然后，您可以执行以下操作：

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

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

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

就我个人而言，我建议使用第二种方法。

Answer 2

我目前正在使用 jQuery Mobile 1.3.1 和 Knockout 2.2.1，并在找到（希望）永久解决此问题之前尝试了多种方法。困难的部分是弄清楚何时应用绑定。当我使用jQuery的ready函数时，这不起作用。我在 jQM 文档 中找到绑定到 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 多页面模板和 Knockout 的意见或解决方案。