敲除可觀察陣列不會更新後添加ajax

Question

我有一個複雜的對象可觀察數組。初始負載很好，所有預期的數據看起來都很好。現在我正在將新項目發佈到該數組。注：可觀察數組正在通過ASP.NET ajax web api調用進行加載。

發佈一個新項目工作正常，儘可能將其保存到數據庫，但我的DOM沒有得到與新項目更新，我不知道我缺少什麼。

這裏是整個視圖模型

function ClientList() { 
    //data 
    var self = this; 
    self.initialized = ko.observable(false); 
    self.clients = ko.observableArray(); 
    self.userId = ko.observable(""); 
    self.name = ko.observable(""); 
    self.logo = ko.observable(""); 
    self.projects = ko.observableArray(); 
    self.clientAddress = ko.observableArray(); 


    self.addClient = function() { 
     var client = { 
      UserId: self.userId, 
      Name: self.name, 
      Logo: self.logo, 
     } 
     client = ko.toJSON(client); 
     lucidServer.addClient(client); 
     self.clients.push(client); 
    }.bind(self); 

    (function() { 
     $.ajax({ 
      url: lucidServer.getClients(1), 
      success: function (data) { 
       ko.mapping.fromJS(data, {}, self.clients); 
       self.initialized(true); 
      } 
     }); 
    })(); 
}; 

function IncompleteStoriesList() { 
    //data 
    var self = this; 
    self.initialized = ko.observable(false); 
    self.stories = ko.observableArray(); 
    (function() { 
     $.ajax({ 
      url: lucidServer.getIncompleteStory(1), 
      success: function (data) { 
       ko.mapping.fromJS(data, {}, self.stories); 
       self.initialized(true); 
      } 
     }); 
    })(); 
}; 


function ViewModel() { 
    var self = this; 
    self.clientList = new ClientList(); 
    self.storyList = new IncompleteStoriesList(); 
} 

ko.applyBindings(new ViewModel()); 

這裏就是我做的POST（客戶端列表中（）函數中）的特定片段。

self.addClient = function() { 
     self.client = { 
     UserId: self.userId(), 
     Name: self.name(), 
     Logo: self.logo(), 
     } 
    //make client object to send to server 
    var client = ko.toJSON(self.client); 
    lucidServer.addClient(client); 
    //push the self.client to the observablearray of clients 
    self.clients.push(self.client); 
}.bind(self); 

我驗證了它是坐在客戶端變量中的JSON，沒有錯誤消息被拋出，所以我很困惑。添加項目並刷新整個頁面後，它將顯示在列表中。

編輯：這裏是相關的HTML：

<form data-bind="submit: clientList.addClient"> 
    <div> 
     <label>userId</label> 
     <input type="text" data-bind="value: clientList.userId" /> 
    </div> 
    <div> 
     <label>name</label> 
     <input type="text" data-bind="value: clientList.name" /> 
    </div> 
    <div> 
     <label>logo</label> 
     <input type="text" data-bind="value: clientList.logo" /> 
    </div> 
    <button type="submit">Add</button> 

    </form> 

    <!-- ko ifnot: clientList.initialized --> 
    <span>Loading...</span> 
    <!-- /ko --> 
    <ul data-bind="template:{name: 'clientList', foreach:clientList.clients}"> 
    </ul> 

和外部模板看起來是這樣的：

<div id="clientListOutput"> 

    <li><span data-bind="text: name"></span> 
     <div data-bind="template: {foreach: clientAddress}"> 
      <span data-bind="text: city"></span> 
      <span data-bind="text: state"></span> 
     </div> 
     <hr /> 
     <ul data-bind="template: {foreach: projects}"> 
      <li> 
       <span data-bind="text: name"></span> 
       <span data-bind="text: summary"></span> 
       <span data-bind="text: description"></span> 
      </li> 
     </ul> 
    </li> 

Answer 1

我很certian你在你的HTML一個錯字。下面是使用ko.observablearray

HTML工作的例子：

<form data-bind="submit: addItem"> 
    prop1: <input data-bind='value: prop1, valueUpdate: "afterkeydown"' /> 
    prop2: <input data-bind='value: prop2, valueUpdate: "afterkeydown"' /> 
    <button type="submit">Add</button> 
    <p>Your items:</p> 
    <div data-bind="foreach: items"> 
     <span data-bind="text: prop1"></span> &nbsp - &nbsp 
     <span data-bind="text: prop2"></span> 
     <br /> 
    </div> 
</form> 

JS：

var SimpleListModel = function() { 
    this.items = ko.observableArray(); 
    this.prop1 = ko.observable(""); 
    this.prop2 = ko.observable(""); 
    this.addItem = function() { 
     this.items.push({prop1:this.prop1, prop2: this.prop2}); 
    }.bind(this); // Ensure that "this" is always this view model 
}; 

ko.applyBindings(new SimpleListModel()); 

http://jsfiddle.net/NjSBg/2/

我想這也有可能你忘了運用綁定...

編輯

我爲發佈錯誤的小提琴而道歉，現在正確的一個。

self.addClient = function() { 
    var client = { 
     UserId: self.userId(), 
     Name: self.name(), 
     Logo: self.logo() 
    } 
    lucidServer.addClient(ko.toJSON(client)); 
    self.clients.push(client); 
}.bind(self); 

你加括號獲得的觀察到