Question

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

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

JQM Page Transition Documentation

我有两个单独的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 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绑定，而不会再次使用。

到目前为止，这对我有用，但我很想知道其他人对使用带有Knockout的jQM多页面模板的意见或解决方案。

Knockoutjs使用多个视图模型

2 个答案: