knockout.js と jquery mobile を使用して、やや単純な todo アプリケーションを作成しようとしています。コードは、ノックアウト (項目を追加するときにその場でメイン ページのテキストを置き換える) を使用しているときは非常にうまく機能します。ただし、アイテムを ko.observableArray に追加した後、jquery モバイルは適切にレンダリングされません。
コードが一瞬正しくレンダリングされた後、ページが更新され、リスト項目が表示されなくなりました。
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('');
};
}
より具体的には、「Inbox」というリスト項目があり、その下にテキスト フィールドがあり、その下にボタンがあります。フィールドに別のリスト項目を入力して [追加] をクリックすると、すべてが正しくレンダリングされていることが一瞬確認できます。その後、更新され、リスト項目が表示されません。
どんな助けでも感謝します。