title: Defining computed observables on members of child array using Knockout mapping plugin
body: <p>I have the following: </p>
  
  <pre><code>// Child Array is Cards, trying to add computed observable for each child
  var CardViewModel = function (data) {
      ko.mapping.fromJS(data, {}, this);
      this.editing = ko.observable(false); 
  };
  
  var mapping = {  
      'cards': {  // This never gets hit, UNLESS I remove the 'create' method below
          create: function (options) {
              debugger;
              return new CardViewModel(options.data);
          }
      },
  
      create: function(options) {
          var innerModel = ko.mapping.fromJS(options.data);
          innerModel.cardCount = ko.computed(function () {
              return innerModel.cards().length;
          });
          return innerModel;
      }
  };
  
  var SetViewModel = ko.mapping.fromJS(setData, mapping);
  debugger;
  ko.applyBindings(SetViewModel);
  </code></pre>
  
  <p>However I can't get the 'cards' binding to work - that code isn't reached unless I remove the 'create' method.  I'm trying to follow the example from the knockout site: </p>
  
  <p><a href="http://knockoutjs.com/documentation/plugins-mapping.html" rel="nofollow">http://knockoutjs.com/documentation/plugins-mapping.html</a></p>
  
  <p>They do this for the child object definition: </p>
  
  <pre><code>var mapping = {
      'children': {
          create: function(options) {
              return new myChildModel(options.data);
          }
      }
  }
  var viewModel = ko.mapping.fromJS(data, mapping);
  </code></pre>
  
  <p>With the ChildModel defined like this: </p>
  
  <pre><code>var myChildModel = function(data) {
      ko.mapping.fromJS(data, {}, this);
  
      this.nameLength = ko.computed(function() {
          return this.name().length;
      }, this);
  }
  </code></pre>
  
  <p>I've spent the past day on this and cannot for the life of me figure out why this isn't working.  Any tips would be awesome.  </p>
  
  <p>EDIT: Here's a fiddle of what I'm working with.  It's only showing SIDE 1 in the result because "editing" isn't recognized here: </p>
  
  <pre><code>&lt;div data-bind="visible: !$parent.editing()" class="span5 side-study-box"&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/PTSkR/1/" rel="nofollow">http://jsfiddle.net/PTSkR/1/</a></p>
  
  <p>This is the error I get in chrome when I run it: </p>
  
  <blockquote>
    <p>Uncaught Error: Unable to parse bindings. Message: TypeError: Object
     has no method 'editing'; Bindings value: visible: !$parent.editing()</p>
  </blockquote>