跨由 jQuery Mobile 动态加载的不同页面绑定 Knockout Js 视图模型

Question

我知道这是一个常见问题，但我意识到有 3 个问题总是模棱两可地回答。

1. 为什么新页面本身不被绑定？
2. 应该使用什么 jQm (jQueryMobile) 事件 来识别和绑定视图模型？
3. 为什么 不它工作即使 在我执行了第 1 步和第 2 步之后

Answer 1

让我尽我所能回答

为什么新页面本身不被绑定？

Knockoutjs 不知道绑定视图模型后加载的任何内容。当然，视图模型中呈现的任何更改都会被跟踪，但新的绑定不能应用于任何外部内容

注意“external”关键字。 jQm 提供了在同一个文档中使用不同的div 和不同的pageID 来维护多个页面，所有这些页面本质上都是绑定的，因为knockoutjs 不关心页面的jQm 呈现。

应该使用什么 jQm 事件来识别和绑定视图模型？

根据您的要求使用任何页面事件来执行此操作，但是我发现加载事件$('.selector').on('pagecontainerload',function(event,ui){...}); 非常有用。下面是一个示例代码。

$('body').on('pagecontainerload', function (event, ui) {
    ko.applyBindings(viewModel, $('#externalPageID')[0]);
});

请注意，externalPageID 不是文档的名称，而是文档中的 pageID。另请注意，applyBindings 方法不采用选择器作为第二个参数，而是采用 javascript 对象，因此采用 [0]。

为什么我按照第 1 步和第 2 步操作后还是不行

你并不孤单，它也对我不起作用。虽然pagecontainerload 事件在页面被jQm 加载和增强后触发，但在applyBindings 方法可以访问页面之前有很短的延迟。我不知道为什么，我要求对此提出任何建议或建议。幸运的是，有一个解决方法，下面是一个示例代码

$('body').on('pagecontainerload', function (event, ui) {
    waitToLoad(ui.page[0].id);
});
ko.applyBindings(viewModel); //bind the initial page

function waitToLoad(pageID) {
    if ($('#' + pageID).length > 0) {
        ko.applyBindings(viewModel, $('#' + pageID)[0]); //bind the external page
    }
    else {
        setTimeout(function () { waitToLoad(pageID); }, 100);
    }
}

上面的代码会立即绑定初始页面，每当加载新页面时，它也会被绑定。但是请确保您没有绑定已经绑定的页面，这种情况不太可能发生，但如果您在 DOM 中强制重新加载页面，则可能会发生这种情况。确保您手动处理。