title: Adding a property to a child object in a viewModel generated by knockout mapping plugin
body: <p>I have the following viewModel: </p>
  
  <pre><code>var ViewModel = function(setData, dummyCard) {
      var self = this;
      ko.mapping.fromJS(setData, {}, self);
  
      self.cardCount = ko.computed(function() {
          //debugger;
          return self.cards().length;
      });
  
      self.editing = ko.observable(false);
  
      self.edit = function () {
          debugger;
          self.editing(true);
      };
  
  };
  </code></pre>
  
  <p>This viewModel is used to display a list of Cards which belong to a Set.  I'm trying to allow the user to edit the Sides of those Cards (both sides at the same time) via the following: </p>
  
  <pre><code>&lt;!-- ko foreach: cards --&gt;
        &lt;!-- ko foreach: sides --&gt;
           &lt;div data-bind="visible: !$root.editing()" class="span5 side-study-box"&gt;
               &lt;p data-bind="text: content"&gt;SIDE 1&lt;/p&gt;
           &lt;/div&gt;
        &lt;!-- /ko --&gt;
  &lt;!-- /ko --&gt;
  </code></pre>
  
  <p>I added the Editing functionality per the example here (see the hasFocus example with Bert Bertington): <a href="http://knockoutjs.com/documentation/hasfocus-binding.html" rel="nofollow noreferrer">http://knockoutjs.com/documentation/hasfocus-binding.html</a></p>
  
  <p>This isn't quite working though because the Edit properties are attached to the $root (Set) object, and not the $parent (Card) object.  I <em>think</em> that the way to make this work involves the "create" method as seen here: <a href="https://stackoverflow.com/questions/8673928/adding-properties-to-the-view-model-created-by-using-the-knockout-js-mapping-plu">Adding properties to the view model created by using the Knockout JS mapping plugin</a></p>
  
  <p>What syntax is required to bring those properties to the side's parent?</p>
  
  <p>Edit: So far I have: </p>
  
  <pre><code>var ViewModel = function(setData, dummyCard) {
      var self = this;
  
      var cardModel = function(data) {
          debugger;
          ko.mapping.fromJS(data, {}, this);
  
          this.editing = ko.observable(false);
  
          this.editing = function() {
              debugger;
              this.editing(true);
          };
      };
  
      var mapping = {
          'cards': {
              create: function(options) {
                  return new cardModel(options.data);
              }
          }
      };
  
  self.cardCount = ko.computed(function() {
          //debugger;
          return self.cards().length;
      });
  </code></pre>
  
  <p>It's not quite working with the rest of the js though - now "cards()" is undefined.  Digging into it now but if anyone has any tips, I'm all ears!</p>