敲除 - 綁定單擊嵌套數組的子元素

Question

好吧，我有一個使用Knockout的問題，它無法解析可觀察數組的子元素上的點擊綁定。我懷疑我的地圖存在問題，但我無法弄清楚。我有我創建了一個的jsfiddle：

http://jsfiddle.net/internetH3ro/ShjeE/1/

這裏是我的JS：

var PaycheckBudgetItem = function(data) { 
    var self = this; 
    self.PaycheckBudgetItemId = ko.observable(data.PaycheckBudgetItemId); 
    self.PaycheckBudgetId = ko.observable(data.PaycheckBudgetId); 
    self.Description = ko.observable(data.Description); 
    self.Amount = ko.observable(data.Amount); 
    self.DueDate = ko.observable(data.DueDate); 
    self.IsPaid = ko.observable(data.IsPaid); 
    self.PaidStatus = ko.observable(data.PaidStatus); 

    self.updateStatus = function() { 
     alert('test'); 
    }; 
}; 

var mapping = { 
    'Items': { 
     create: function(options) { 
      return new PaycheckBudgetItem(options.data); 
     } 
    } 
}; 

var PaycheckBudget = function(data) { 
    var self = this; 
    self.PaycheckBudgetId = ko.observable(data.PaycheckBudgetId); 
    self.PaycheckBudgetDate = ko.observable(data.PaycheckBudgetDate); 
    self.PaycheckBudgetAmount = ko.observable(data.PaycheckBudgetAmount); 
    self.Remaining = ko.observable(data.Remaining); 
    self.Items = ko.observableArray(data.Items); 
    ko.mapping.fromJSON(data.Items, mapping, self.Items); 
}; 

var BudgetListViewModel = function(data) { 
    var self = this; 
    self.budgets = ko.observableArray(data); 
}; 

var data = [ 
    { 
    "PaycheckBudgetId": 1, 
    "PaycheckBudgetDate": "11/9/2012", 
    "PaycheckBudgetAmount": 2315, 
    "Items": [ 
     { 
     "PaycheckBudgetItemId": 11, 
     "PaycheckBudgetId": 1, 
     "Description": "Rent", 
     "Amount": 400, 
     "DueDate": "11/9/2012", 
     "IsPaid": "Unpaid", 
     "PaidStatus": false}, 
    { 
     "PaycheckBudgetItemId": 12, 
     "PaycheckBudgetId": 1, 
     "Description": "Cell Phone", 
     "Amount": 166, 
     "DueDate": "11/9/2012", 
     "IsPaid": "Unpaid", 
     "PaidStatus": false} 
    ], 
    "Remaining": 1749}, 
{ 
    "PaycheckBudgetId": 2, 
    "PaycheckBudgetDate": "11/23/2012", 
    "PaycheckBudgetAmount": 2315, 
    "Items": [ 
     { 
     "PaycheckBudgetItemId": 3, 
     "PaycheckBudgetId": 2, 
     "Description": "Rent", 
     "Amount": 400, 
     "DueDate": "11/23/2012", 
     "IsPaid": "Unpaid", 
     "PaidStatus": false}, 
    { 
     "PaycheckBudgetItemId": 4, 
     "PaycheckBudgetId": 2, 
     "Description": "Tuition", 
     "Amount": 250, 
     "DueDate": "11/23/2012", 
     "IsPaid": "Unpaid", 
     "PaidStatus": false} 
    ], 
    "Remaining": 1665} 
]; 

ko.applyBindings(new BudgetListViewModel(data), $('#budget-list-container')[0]);​ 

這裏是我的HTML：

<div id="budget-list-container" class="well sidebar-nav"> 
     <ul class="nav nav-list" data-bind="template: { name: 'budgetTemplate', foreach: budgets, as: 'budget' }"> 
      <script type="text/html" id="budgetTemplate"> 
       <li class="nav-header"> 
        Paycheck for <span data-bind="text: PaycheckBudgetDate"></span> - <span data-bind="text: formatCurrency(PaycheckBudgetAmount)"></span> 
       </li> 
       <li> 
        <table class="table table-bordered table-condensed"> 
         <thead> 
          <tr> 
           <th>Description</th> 
           <th>Amount</th> 
           <th>Due Date</th> 
           <th>Paid/Unpaid</th> 
          </tr> 
         </thead> 
         <tbody data-bind="template: { name: 'budgetItemTemplate', foreach: Items, as: 'budgetItem' }"></tbody> 
        </table> 
         Remaining: <span data-bind="text: formatCurrency(Remaining)"></span> 
        <hr /> 
       </li> 
      </script> 
      <script type="text/html" id="budgetItemTemplate"> 
       <tr> 
        <td><span data-bind="text: Description"></span></td> 
        <td><span data-bind="text: formatCurrency(Amount)"></span></td> 
        <td><span data-bind="text: DueDate"></span></td> 
        <td> 
         <button class="btn-link pull-right update-status" data-bind="text: IsPaid, click: updateStatus" /> 
        </td> 
       </tr> 
      </script> 
     </ul> 
    </div>​ 

它的肉是這樣的。我有2個KO模型，PaycheckBudget和PaycheckBudgetItem。 PaycheckBudget包含一個可觀察的PaycheckBudgetItem模型數組。在名爲「updateStatus」的PaycheckBudgetItem模型上有一個函數綁定到HTML中的單擊事件。當我加載我的頁面時，出現錯誤「無法解析綁定，updateStatus未定義」。

我假設我的問題是在我的項目映射的某個地方。如果我刪除點擊處理程序，一切都會正確綁定並顯示。

如果有人能幫助我，也許指出我錯過了什麼，那將是超級有用的。我對Knockout的東西有些陌生，所以很可能我錯過了一些明顯/簡單的東西。

（沒有，沒有在我的小提琴數據是敏感的或現實世界，只是虛擬數據。:)）

Answer 1

我沒有回答你的問題在the KnockoutJs JabbR chat room。

你在你的假設中是正確的。問題似乎主要是你的映射。你甚至從來沒有調用過PaycheckBudget類的構造函數。例如，您BudgetListViewModel構造是這樣的：

var BudgetListViewModel = function(data) { 
    var self = this; 
    self.budgets = ko.observableArray(data); 
}; 

但也許應該是這樣的：

var BudgetListViewModel = function(data) { 
    var self = this; 
    self.budgets = ko.observableArray(ko.utils.arrayMap(data, function(item){ 
     return new PaycheckBudget(item); 
    })); 
}; 

II've編輯您的jsfiddle一點，並在有工作示例：http://jsfiddle.net/KBpET/。我首先編輯了其他映射，所以我從來沒有檢查過項目映射是否正確，但我相信你能夠解決這個步驟（項目的代碼已經在鏈接的小提琴中更改了）。

希望它有幫助！

/羅伯特