title: Creating elements of observableArrays as observables (deep mapping)
body: <p>I'm new to the mapping plugin and think that I'm missing something obvious.</p>
  
  <p>How can I get ko.mapping to 'deeply' create members of observable arrays as observables themselves? I've looked at 'create callbacks' and 'options' in the documentation, but don't see anything obvious. </p>
  
  <p>I have quite a large object model and so would prefer not to have to bind the viewModel by hand. Also, as a side issue perhaps, there is a need to add elements dynamically as observables as well.</p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;p&gt;
      here, ko.mapping succesfully creates an observable...&lt;br/&gt;
      &lt;input data-bind="value:someText, valueUpdate:'afterkeydown'"&gt;&lt;/input&gt;
  &lt;/p&gt;
  
  &lt;p&gt;
      however, here, the contents of the observable array are not observables...&lt;/br&gt;    
      &lt;span data-bind="foreach: { data: years, as: 'year' }"&gt;
  
     &lt;input data-bind="value:year, valueUpdate:'afterkeydown'"&gt;&lt;/input&gt;
  
      &lt;br /&gt;
      &lt;/span&gt;
      &lt;button data-bind="click:function(){addYear();}"&gt;add&lt;/button&gt;
  &lt;/p&gt;
  
  &lt;p&gt;&lt;br /&gt;&lt;br /&gt;&lt;div data-bind="text: ko.toJSON($root)"&gt;&lt;/div&gt;&lt;/p&gt;
  </code></pre>
  
  <p>​</p>
  
  <p><strong>javascript</strong></p>
  
  <pre><code>var model={    
      someText: 'Hello',        
      years:[2000,2001,2002]
  };
  
  var viewModel = ko.mapping.fromJS(model);
  viewModel.addYear=function(){viewModel.years.push(ko.observable(""));}
  ko.applyBindings(viewModel);
  </code></pre>
  
  <p>​</p>
  
  <p><a href="http://jsfiddle.net/damiensawyer/Sfg4K/" rel="nofollow">Here's</a> a jsFiddle link</p>
  
  <p>Thanks very much for your help, </p>
  
  <p>DS</p>