title: knockout dynamic binding issue
body: <p>Consider the following ViewModel that is generated through the knockout mapping plugin.</p>
  
  <pre><code>var originalData = {
  
  "QuoteSelectedViewModel": {
    "ProductName": "Select",      
    "CoverQuotesViewModel": [
       {
          "Code": 1,
          "Label": "Première Assistance 24h/24 (GRATUITE)",
          "IsMandatory": true,
          "IsSelected": true,            
          "DependsOn": []
       },
       {
          "Code": 2,
          "Label": "Assistance PLUS 24h/24",
          "IsMandatory": false,
          "IsSelected": false,          
          "DependsOn": []
       },
        {
          "Code": 8,
          "Label": "Heurts Animaux / Force de la Nature",
          "IsMandatory": false,
          "IsSelected": false,        
          "DependsOn": [
             2
          ]
       },
    ]}
  }
  
  var viewModel = ko.mapping.fromJS(originalData);
  
  ko.applyBindings(viewModel);
  
  
  &lt;div data-bind="with: QuoteSelectedViewModel"&gt;
  selected quote is : &lt;span data-bind="text: ProductName"&gt;&lt;/span&gt;
   &lt;!-- ko foreach: CoverQuotesViewModel --&gt;
  &lt;br/&gt;    
    &lt;div data-bind: if: IsVisible&gt;
      &lt;input type="checkbox" data-bind="checked: IsSelected"&gt;&lt;/input&gt;
      &lt;input type="text" data-bind="value: Label, enable: IsSelected"&gt;&lt;/input&gt;
    &lt;/div&gt;
  &lt;!-- /ko --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now, I would like to hide the div when IsVisible returns false. IsVisible does not exist yet, and it should be a computed observable function on each element of the CoverQuotesViewModel array. </p>
  
  <p>How do I generate this computed observable function on each element ? </p>
  
  <p>Thanks</p>
  
  <p><em><strong>[EDIT]</em></strong>
  I've added a jsfiddle here : <a href="http://jsfiddle.net/graphicsxp/fpKWM/" rel="nofollow">http://jsfiddle.net/graphicsxp/fpKWM/</a></p>
  
  <p>[EDIT2]
  Actually knockout document is clear about how to do that:</p>
  
  <blockquote>
    <p>Of course, inside the create callback you can do another call to
    ko.mapping.fromJS if you wish. A typical use-case might be if you want
    to augment the original JavaScript object with some additional
    computed observables:</p>
    
    <p>var myChildModel = function(data) {
        ko.mapping.fromJS(data, {}, this);</p>
  
  <pre><code>this.nameLength = ko.computed(function() {
      return this.name().length;
  }, this); }
  </code></pre>
  </blockquote>
  
  <p><strong>[EDIT]</strong></p>
  
  <p>Here's the full code following Paul's suggestion:
  (getQuotesSuccess is an AJAX success handler)</p>
  
  <pre><code>viewModel.getQuotesSuccess = function (result) {
  var myCoverQuotesViewModel = function (data, parent) {
      var self = this;
      ko.mapping.fromJS(data, {}, this);
  
      self.IsVisible = ko.computed(function () {
          var visible = true;
          if (self.DependsOn().length &gt; 0) {
              $.each(self.DependsOn(), function (index, value) {
                  var dependency = viewModel.QuoteSelectedViewModel().CoverQuotesViewModel.filterByProperty("Code", value);
                  if (dependency().length &gt; 0) {
                      visible = visible &amp; dependency()[0].IsSelected();
                  } else {
                      visible = false;
                  }
              });
          }
  
          return visible;
  
      }, this);
  }
  
  var mapping = {
      'CoverQuotesViewModel': {
          create: function (options) {
              return new myCoverQuotesViewModel(options.data, options.parent);
          }
      }
  }
  
    ko.mapping.fromJS(result, mapping, viewModel);
  };
  </code></pre>