Javascript jquerymobile与Knockout的结合

我在JQuery Mobile和Knockout的结合中遇到了一些问题。事实上，这两个框架对我来说都是全新的，所以我在这里有点迷茫，不知道到底出了什么问题

由于这两个框架对我来说都是新的，所以我决定从淘汰赛网站上挑选一个教程（todo列表），并将其与JQuery Mobile结合起来。到目前为止，除了一点简单的HTML，我没有在原始教程代码中添加太多自定义代码。在JSFIDLE上查看此示例：

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

---

有人知道这个问题的解决办法吗？我希望表单与Knockout一起工作，但保持JQM的外观。由于我对这两个框架都不熟悉，所以非常感谢您提供一些关于出错原因的详细信息！提前感谢…

问题是jQuery mobile认为您正在提交表单，您需要防止这种情况发生

我认为最好的解决办法是：

---

或者，您可以为

keydown

附加

click

处理程序和通用事件处理程序，以捕获返回键。

问题在于jQuery mobile认为您正在提交表单，需要加以阻止

我认为最好的解决办法是：

---

或者，您可以为

keydown

附加一个

click

处理程序和一个通用事件处理程序来捕获返回键。

在回答您关于丢失样式的评论时，我猜这是由于内容更改后listview没有被刷新。 你可以用一个 $（元素）.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> 

在回答您关于丢失样式的评论时，我猜这是因为内容更改后listview没有刷新。 你可以用一个 $（元素）.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> 

谢谢，我关注了您给我的链接，它确实有效。但是，它完全绕过了JQuery移动样式，我希望保留它。这可以通过使用你的替代方法来实现吗？点击处理程序和按键？谢谢，我遵循了你给我的链接，它确实有效。但是，它完全绕过了JQuery移动样式，我希望保留它。这可以通过使用你的替代方法来实现吗，比如点击处理程序和按键？