title: Knockout - Binding click to nested array child element
body: <p>Okay, I have an issue using Knockout in that it isn't able to parse a click binding on a child element of an observable array.  I suspect that I'm having an issue with my mapping, but I can't figure it out.  I have a jsFiddle that I created:</p>
  
  <p><a href="http://jsfiddle.net/internetH3ro/ShjeE/1/" rel="nofollow">http://jsfiddle.net/internetH3ro/ShjeE/1/</a></p>
  
  <p>Here's my JS:</p>
  
  <pre><code>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]);​
  </code></pre>
  
  <p>Here's my HTML:</p>
  
  <pre><code>&lt;div id="budget-list-container" class="well sidebar-nav"&gt;
          &lt;ul class="nav nav-list" data-bind="template: { name: 'budgetTemplate', foreach: budgets, as: 'budget' }"&gt;
              &lt;script type="text/html" id="budgetTemplate"&gt;
                  &lt;li class="nav-header"&gt;
                      Paycheck for &lt;span data-bind="text: PaycheckBudgetDate"&gt;&lt;/span&gt; - &lt;span data-bind="text: formatCurrency(PaycheckBudgetAmount)"&gt;&lt;/span&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;table class="table table-bordered table-condensed"&gt;
                          &lt;thead&gt;
                              &lt;tr&gt;
                                  &lt;th&gt;Description&lt;/th&gt;
                                  &lt;th&gt;Amount&lt;/th&gt;
                                  &lt;th&gt;Due Date&lt;/th&gt;
                                  &lt;th&gt;Paid/Unpaid&lt;/th&gt;
                              &lt;/tr&gt;
                          &lt;/thead&gt;
                          &lt;tbody data-bind="template: { name: 'budgetItemTemplate', foreach: Items, as: 'budgetItem' }"&gt;&lt;/tbody&gt;
                      &lt;/table&gt;
                          Remaining: &lt;span data-bind="text: formatCurrency(Remaining)"&gt;&lt;/span&gt;
                      &lt;hr /&gt;
                  &lt;/li&gt;
              &lt;/script&gt;
              &lt;script type="text/html" id="budgetItemTemplate"&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;span data-bind="text: Description"&gt;&lt;/span&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;span data-bind="text: formatCurrency(Amount)"&gt;&lt;/span&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;span data-bind="text: DueDate"&gt;&lt;/span&gt;&lt;/td&gt;
                      &lt;td&gt;
                          &lt;button class="btn-link pull-right update-status" data-bind="text: IsPaid, click: updateStatus" /&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/script&gt;
          &lt;/ul&gt;
      &lt;/div&gt;​
  </code></pre>
  
  <p>The meat of it is this.  I have 2 KO models, PaycheckBudget and PaycheckBudgetItem.  PaycheckBudget contains an observable array of PaycheckBudgetItem models.  There is a function on the PaycheckBudgetItem model named "updateStatus" that is bound to a click event in my HTML.  When I load my page, I get the error "Unable to parse bindings.  updateStatus is not defined".</p>
  
  <p>I'm assuming that my issue is somewhere in my mapping of items.  If I remove the click handler, everything binds and displays properly.</p>
  
  <p>If anyone could help me out, maybe point out what I'm missing, that would be super helpful.  I'm somewhat new to the Knockout stuff, so it's likely I'm missing something obvious/simple.</p>
  
  <p>(And no, none of the data in my fiddle is sensitive or real-world, just dummy data.  :) )</p>