我正在尝试使用 knockout.js 和 jquery mobile 编写一个简单的 todo 应用程序。当我只使用敲除（在添加项目时动态替换主页中的文本）时，该代码运行良好。但是，将项目添加到 ko.observableArray 后，jquery mobile 将无法正确呈现。
我可以在一瞬间看到代码正确呈现，然后页面刷新并且不再显示任何列表项。
的HTML：
<div data-role="page">
<div data-role="header">
<h1>Lists</h1>
</div>
<div data-role="content">
<ul data-bind="foreach: lists" data-role="listview" data-inset="true">
<li data-bind="text: name"></li>
</ul>
<form data-bind="submit: addList">
<input data-bind="value: newListName" placeholder="new list name" />
<button type="submit">Add New List</button>
</form>
</div>
<div data-role="footer" data-position="fixed">
<h1>Footer</h1>
</div>
</div>
Javascript：
function List(data) {
var self = this;
self.name = ko.observable(data.name);
self.tasks = ko.observableArray([]);
}
function TaskListViewModel() {
var self = this;
self.currentList = ko.observable(new List({ name: "Inbox" }));
self.newListName = ko.observable('');
self.lists = ko.observableArray([self.currentList()]);
self.addList = function() {
self.currentList(new List({ name: this.newListName() }));
self.lists.push(self.currentList());
self.newListName('');
};
}
更具体地说，我可以看到一个带有“收件箱”的列表项，下面有一个文本字段，然后是一个按钮。当我在字段中输入另一个列表项并单击“添加”时，我可以立即看到正确呈现的所有内容。然后它刷新，我看不到任何列表项。
任何帮助表示赞赏。