Knockout.js observableArray在jQuery-mobile中無法正確呈現時更新

Question

我正嘗試使用knockout.js和jquery mobile編寫一個稍微簡單的待辦事項應用程序。代碼工作得很好，當我只是使用淘汰賽（當我添加項目時，替換主頁中的文本）。但是，將項目添加到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(''); 
    }; 
} 

更具體地說，我可以看到一個列表項與 「收件箱」，與下方的文本字段，然後下面一個按鈕。當我在該字段中輸入另一個列表項並單擊「添加」時，我可以瞬間看到正確呈現的所有內容。然後它刷新，我看不到任何列表項目。

任何幫助表示讚賞。

Answer 1

這聽起來像表單正在提交和頁面重新加載。嘗試在這裏找到解決方法：jquery mobile and knockout form submit binding