녹아웃 - 중첩 배열 하위 요소로 바인딩 클릭

Question

좋아요, 관찰 가능한 배열의 하위 요소에서 클릭 바인딩을 구문 분석 할 수 없다는 점에서 녹아웃을 사용하는 데 문제가 있습니다. 나는 나의 매핑에 문제가 있다고 생각하지만, 나는 그것을 이해할 수 없다.

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

여기 내 JS : 내가 만든 jsFiddle이

<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>​ 

그것의 고기는 이것이다 :

이

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입니다. 나는 2 KO 모델, PaycheckBudget 및 PaycheckBudgetItem 있습니다. PaycheckBudget은 관찰 가능한 PaycheckBudgetItem 모델 배열을 포함합니다. PaycheckBudgetItem 모델에는 "updateStatus"라는 함수가 있는데, HTML에서 click 이벤트에 바인딩되어 있습니다. 내 페이지를로드 할 때 "바인딩을 구문 분석 할 수 없습니다. updateStatus가 정의되지 않았습니다."라는 오류 메시지가 나타납니다.

내 문제가 내 항목 매핑에 있다고 가정합니다. 클릭 핸들러를 제거하면 모든 것이 올바르게 바인딩되고 표시됩니다.

누구든지 나를 도울 수 있다면, 내가 누락 된 부분을 지적해도 도움이 될 것입니다. 나는 녹아웃 물건에 약간 새로운 것이므로, 명백한/간단한 것을 놓친 것 같습니다.

(그리고 아니, 내 바이올린의 데이터 중 어느 것도 민감하거나 실제, 단지 더미 데이터입니다. :))

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/. 먼저 다른 매핑을 편집 했으므로 항목 매핑이 올바른지 여부는 확인하지 않았지만 해당 단계를 해결할 수 있습니다 (항목에 대한 코드가 연결된 바이올린에서 변경 되었음).

희망 하시겠습니까?

/로버트