title: knockout binding not working with array
body: <p>I'm trying to do the following: (see sample in jsfiddle:<a href="http://jsfiddle.net/graphicsxp/QJK99/1/" rel="nofollow">http://jsfiddle.net/graphicsxp/QJK99/1/</a>)</p>
  
  <p>javascript:</p>
  
  <pre><code>var originalData = {
  id: 1,
  name: "Main",
   children: [ { id: 2, name: "bob" }, { id: 3, name: "ted" } ],
  selectedChild:  { id: 2, name: "bob" }
  };
  
  var viewModel = ko.mapping.fromJS(originalData);
  
  viewModel.selectChild = function(){
     var obj =  { id: 9, name: "new" };
  
     viewModel.selectedChild(obj);
  }  
  
  ko.applyBindings(viewModel);
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code> &lt;button data-bind="click: selectChild"&gt;click me&lt;/button&gt;
  
  &lt;br/&gt;
  
   &lt;span data-bind="text: selectedChild.name"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>but that does not display the selectedChild property. What am I doing wrong ? </p>
  
  <p><strong>[EDIT]</strong></p>
  
  <p>I had to add parenthesis to this code:</p>
  
  <pre><code>&lt;span data-bind="text: selectedChild().name"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>which is fine, but I also had to add this line of code after mapping:</p>
  
  <pre><code>viewModel.selectedChild = ko.observable(viewModel.children()[0]);
  </code></pre>
  
  <p>which is super annoying. Why do I need to implicitely set the property to observable ? Plus, if I don't give it a default value, it won't work. WHy ? </p>