JQuery Mobile 与 Knockout 结合使用答案

【问题标题】：JQuery Mobile in combination with KnockoutJQuery Mobile 与 Knockout 结合使用
【发布时间】：2012-09-26 22:03:41
【问题描述】：

我在将 JQuery Mobile 与 Knockout 结合使用时遇到了一些问题。实际上，这两个框架对我来说都是全新的，所以我有点迷失在实际出了什么问题。

由于这两个框架对我来说都是新的，所以我决定从 Knockout 网站中选择一个教程（待办事项列表）并将其与 JQuery Mobile 结合使用。到目前为止，我没有在原始教程代码中添加太多自定义代码，除了一些简单的 HTML。在 jsFiddle 上查看这个示例：http://jsfiddle.net/nHhHV/2/

如果您仔细观察，您可以清楚地看到 Knockout 将新项目添加到列表中。然而，一瞬间之后，JQuery Mobile 似乎完全重新渲染了那部分 HTML 并弄乱了表单。如果没有 JQuery Mobile，它可以正常工作。

有人知道这个的解决方案吗？我希望表单与 Knockout 一起使用，但保持 JQM 外观。由于我对这两个框架都不熟悉，因此将不胜感激有关出了什么问题的详细信息！提前谢谢...

【问题讨论】：

标签： javascript html jquery-mobile knockout.js

【解决方案1】：

问题是 jQuery mobile 认为你正在提交一个表单，你需要阻止它。

我相信最好的解决方案在这里：jquery mobile and knockout form submit binding

或者，您可以附加click 处理程序和keydown 的通用事件处理程序来捕获返回键。

【讨论】：

谢谢，我点击了你给我的链接，它确实有效。但是，它完全绕过了我想保留的 JQuery Mobile 样式。这可以通过使用您的替代方法来完成吗，所以点击处理程序和 keydown？

【解决方案2】：

在回答您关于丢失样式的评论时，我猜这是因为在内容更改后列表视图没有被刷新。你可以这样做 $(element).listview('刷新'); 或者，您可以再次添加自定义绑定....

ko.bindingHandlers.mobileList = {
'update': function (element, valueAccessor) {
    setTimeout(function () { //To make sure the refresh fires after the DOM is updated
        console.log("listview refresh");
        $(element).listview('refresh');
    }, 0);
}
};

并从

更改您的数据绑定

<ul data-bind="foreach: tasks, visible: tasks().length>

到

<ul data-bind="mobileList: tasks, foreach: tasks, visible: tasks().length>

【讨论】：