нокаут несколько с привязками

Question

У меня есть страница с несколькими моделями просмотров, и мне нужно динамически построить сетку checkbox на основе 2 из них.

Этот код заполнит сетку, основанную на 1 вид модели:

<div id="fundingDetailLevels" class="scroll-adjust" data-bind="with: modelOne"> 
     <table class="table table-hover"> 
      <thead> 
       <tr data-bind="foreach: modelOneArray"> 
        <!-- ko if: $index() == 0 --> 
         <th></th> 
        <!-- /ko --> 
        <th data-bind="text: name" ></th> 
       </tr> 
      </thead> 
      <tbody data-bind="foreach: modelOneArray2"> 
       <tr data-bind="foreach: $parent.modelOneArray" > 
        <!-- ko if: $index() == 0 --> 
         <td data-bind="text: $parent.name"></td> 
        <!-- /ko --> 
        <td><input type="checkbox"></input></td> 
       </tr> 
      </tbody>  
     </table> 
    </div> 

Который дает мне сетку:

 header1 header2 
row1 checkbox checkbox 
row2 checkbox checkbox 

но то, что мне нужно что-то ближе к этому:

<div id="fundingDetailLevels" class="scroll-adjust" data-bind="with: modelOne, modelTwo"> 
     <table class="table table-hover"> 
      <thead> 
       <tr data-bind="foreach: modelOneArray"> 
        <!-- ko if: $index() == 0 --> 
         <th></th> 
        <!-- /ko --> 
        <th data-bind="text: name" ></th> 
       </tr> 
      </thead> 
      <tbody data-bind="foreach: modelTwoArray"> 
       <tr data-bind="foreach: $parent.modelOneArray" > 
        <!-- ko if: $index() == 0 --> 
         <td data-bind="text: $parent.name"></td> 
        <!-- /ko --> 
        <td><input type="checkbox"></input></td> 
       </tr> 
      </tbody>  
     </table> 
    </div> 

но это не находит модель 2

Answer 1

Если вы просто сделаете одну модель взгляда, то вы сможете добиться того, что вам нужно. Попробуйте это:

 var baseModel = function() { 
      var self = this; 

      self.modelOneArray = ko.observableArray([{ "name": "Jack" }, { "name": "Jimmy" }]); 
      self.modelTwoArray = ko.observableArray([{ "name": "Jack2" }, { "name": "Jimmy2" }]); 
     }; 

     var myModel = myModel || {}; 

     myModel = new baseModel(); 
     ko.applyBindings(myModel); 

и HTML:

<div id="fundingDetailLevels" class="scroll-adjust"> 
    <table class="table table-hover"> 
     <thead> 
      <tr data-bind="foreach: modelOneArray"> 
       <!-- ko if: $index()==0 --> 
       <th></th> 
       <!-- /ko --> 
       <th data-bind="text: name"></th> 
      </tr> 
     </thead> 
     <tbody data-bind="foreach: modelTwoArray"> 
      <tr data-bind="foreach: myModel.modelOneArray"> 
       <!-- ko if: $index()==0 --> 
       <td data-bind="text: myModel.modelOneArray().name"></td> 
       <!-- /ko --> 
       <td> 
        <input type="checkbox"></input> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</div>