Javascript 跨jQueryMobile动态加载的不同页面绑定Knockoutjs viewmodels

我知道这是一个经常被问到的问题，但我意识到有3个问题总是含糊不清地回答

为什么新的页面没有固有的绑定？ 应该使用什么jQm jQueryMobile事件来标识和绑定viewmodel？ 为什么即使在我执行了步骤1和步骤2之后，它仍然不起作用

---

让我尽我所能回答你的问题

为什么新的页面没有固有的绑定

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

注意外部关键字。jQm提供在同一文档中使用具有不同pageID的不同div维护多个页面，所有这些页面都是固有绑定的，因为knockoutjs不关心页面的jQm呈现

应该使用什么jQm事件来标识和绑定viewmodel

根据您的需求，使用任何页面事件来执行此操作，但是我发现加载事件$'.selector'。在'pagecontainerload'，functionevent，ui{…}；非常有用。下面是一个示例代码

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

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

为什么在我完成了第一步和第二步之后它仍然不起作用

你并不孤单，这对我也不起作用。尽管在页面被jQm加载和增强后会触发pagecontainerload事件，但在通过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中重新加载页面，则可能会发生这种情况。请确保手动处理。

浏览我的帖子，你会完全理解我的意思。@raheelshan，这是一篇问答文章，我已经尽我所知解释过了，但谢谢你的帖子：