ajax調用成功後將viewmodel綁定到ui敲除

Question

我在每行數據中都有一個selectall toggle複選框和複選框。

現在從服務器返回的數據不具有isSelected可觀察。我爲每一行添加了「isSelected」可觀察值。但isSelected可觀察不會綁定到每一行中的複選框。

這裏是視圖模型：

var folderViewModel = function() { 
    var self = this; 
    self.Folders = ['Inbox', 'Archive', 'Sent', 'Spam']; 
    self.SelectedFolder = ko.observable(); 
    self.Mails = ko.observableArray([]); 
    self.SelectedMail = ko.observable(); 
    self.SelectAll = ko.observable(false); 

    self.navigate = function (folder) { 
     self.SelectedFolder(folder); 
     //$.get('/Api/MailBox', { folder: folder }, self.Mails); 

     $.ajax({ 
      url: "/Api/Mailbox", 
      data: { folder: folder }, 
      success: function (data) { 
       ko.mapping.fromJS(data, {}, self.Mails); 
       ko.utils.arrayForEach(self.Mails(), function (mail) { 
        mail.isSelected = ko.observable(true); 
        mail.isSelected.subscribe(function (myvalue) { 
         console.log(myvalue); 
        }); 
       }); 
       console.log(ko.toJSON(self.Mails())); 
      }, 
      statusCode: { 
       404: function() { 
        alert("No Mail"); 
       } 
      } 
     }); 

     //ko.mapping.fromJS(data, {}, self.Mails); 
     //console.log(ko.toJSON(self.Mails)); 
    }; 

    self.SelectAll.subscribe(function (newValue) { 
     ko.utils.arrayForEach(self.Mails(), function (mail) { 
      console.log(mail.isSelected()); 
      mail.isSelected(newValue); 

     }); 
     console.log(newValue); 
    }, self); 

    this.navigate("Inbox"); 
}; 
ko.applyBindings(new folderViewModel()); 

這裏是綁定。

<table class="table table-bordered table-striped table-condensed table-hover"> 
<thead> 
    <tr> 
     <th> 
      <input type="checkbox" data-bind="checked: SelectAll"/> 
      @*<input type="checkbox" />*@ 
     </th> 
     <th> 
      From 
     </th> 
     <th> 
      To 
     </th> 
     <th> 
      Subject 
     </th> 
     <th> 
      Date 
     </th> 
    </tr> 
</thead> 
<tbody data-bind="foreach:Mails"> 
    <tr data-bind="click:$root.navigateToMail"> 
     <td style="width: 15px"> 
      <input type="checkbox" data-bind="checked: $root.isSelected"> 
      @*<input type="checkbox">*@ 
     </td> 
     <td data-bind="text: From"> 
     </td> 
     <td data-bind="text: To"> 
     </td> 
     <td data-bind="text: Subject"> 
     </td> 
     <td data-bind="text: MailDate"> 
     </td> 
    </tr> 
</tbody> 

複選框<input type="checkbox" data-bind="checked: $root.isSelected">不獲取綁定到AJAX數據mails.isSelected=ko.obsevable(true)。可能是什麼問題？

Answer 1

首先，kuddos使用learn.knockoutjs.com示例，令人驚歎的資源。

您的錯誤是KnockoutJS中的一個常見錯誤：您正在修改模型而不更新綁定到它的observables。請參閱下面的線 -

ko.mapping.fromJS(data, {}, self.Mails); 
ko.utils.arrayForEach(self.Mails(), function (mail) { ... }); 

如果你看到，你第一次創建您的郵件模型，然後添加一個額外的觀測。這個觀察值應該附加到哪個上下文中？在不更新每封郵件的值的情況下，您的mail.isSelected永遠不會添加到郵件對象。

有解決這個方法有兩種。第一個，你在foreach數組中更新郵件模型：

ko.utils.arrayForEach(self.Mails(), function (mail, index) { 
    // Add up the isSelected observable 
    self.Mails()[index] = mail; 
}); 

這對觀察到的數組，你可以閱讀here一個性能缺陷。基本上，你想要創建一個臨時數組並且每次更新整個可觀察數組，而不是每次調用Mails()。

另一種方法是相當簡單：交換你是如何創建的郵件模式的順序：

ko.utils.arrayForEach(self.Mails(), function (mail) { ... }); 
ko.mapping.fromJS(data, {}, self.Mails); 

首先，你要附加一個數據對象的觀察到的，然後你告訴你的視圖模型「嘿！我們有一個新的模型來保存它有data這個屬性加上一個可觀察的isSelected我剛剛添加，小心綁定它？

話雖這麼說，在HTML屬性是checked: isSelected而不是checked: $root.isSelected，這就是爲什麼它被排序在全選（在某種程度上）工作的原因，因爲isSelected正在綁定您的視圖模型，而不是你的郵件模型。你可以有這個方便聲明弄明白調試：

// In any row inside your data 
<td data-bind="text: ko.toJSON($data)">DEBUG DATA</td> 

這應該是它，你可以看到你的代碼在這裏工作，以及其所有的解決方案：http://jsfiddle.net/jjperezaguinaga/VTuHA/。我添加了一些示例數據（來自JsFiddle的/echo/json/功能），並刪除了一些內容，以及我用來調試最後一個代碼的額外列。在最後一列中，您可以看到每次點擊複選框時更新的值爲isSelected。

Answer 2

是不是isSelected增加在每個mail項目，而不是在root視圖模型？如果是這樣的結合應該僅僅是：

<input type="checkbox" data-bind="checked: isSelected"> 

注：我還沒有看到一個navigateToMail方法在root視圖模型可用，這也將導致問題。