1

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

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

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

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

4

2 回答 2

2

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

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

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

于 2012-09-26T22:43:34.873 回答
2

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

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>
于 2012-09-27T13:54:34.137 回答