Knockout.jsテーブル内のネストされたモデル/コンテナレス "foreach"テーブルの行を繰り返します

Question

私は、テーラーメイド製品の注文を追跡するアプリケーションを構築しています。各製品は多くのカスタム詳細を持つことができます。注文に製品を追加し、それぞれをカスタマイズするには、画面が次のようになります。

<button>+</button><!-- "Add new product line" button --> 
<table> 
    <thead> 
     <tr> 
      <th></th> 
      <th>Producto</th><!-- The product category or type --> 
      <th>Modelo</th><!-- The product --> 
      <th>Cantidad</th><!-- Quantity --> 
      <th>Unitario</th><!-- Unit Price --> 
      <th>Mano de Obra</th><!-- The price of the product itself --> 
      <th>Genero</th><!-- The price of the customization --> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="producto"><!-- Product line --> 
      <td><button>-</button></td><!-- "Remove" button, should remove the product and it's customizations --> 
      <td><select>Producto</select></td><!-- Choose category --> 
      <td><select>Modelo</select></td><!-- Choose product --> 
      <td><input type="text" class="cantidad" /></td><!-- Enter quantity --> 
      <td><input type="text" class="unitario" /></td><!-- Enter unit price --> 
      <td>$ <span class="mano_obra"></span></td><!-- Line total. The product lines calculates on this column --> 
      <td><button>+</button></td><!-- "Add customization" button. Should add a line like the next <tr> --> 
     </tr> 
     <tr class="genero"><!-- Customization line --> 
      <td><button>-</button></td><!-- "Remove" button, should remove only this customization line --> 
      <td>Genero</td><!-- Fixed text --> 
      <td><input type="text" class="genero" /></td><!-- Enter customization description --> 
      <td><input type="text" class="cantidad" /></td><!-- Enter quantity --> 
      <td><input type="text" class="unitario" /></td><!-- Enter unit price --> 
      <td>&nbsp;</td><!-- On customizations, this column is empty --> 
      <td>$ <span class="genero"></span></td><!-- Line total. The customizations calculates on this column --> 
     </tr> 
     <tr class="genero"> 
      <!-- Another customization for the first product --> 
     </tr> 
     <tr class="genero"> 
      <!-- Another one --> 
     </tr> 
     <tr class="producto"> 
      <!-- A different product --> 
     </tr> 
     <tr class="genero"> 
      <!-- The new product customization --> 
     </tr> 
     <!-- (etc) --> 
    </tbody> 
    <tfoot> 
     <tr> 
      <td colspan="5">Subtotales</td><!-- Fixed text --> 
      <td>$ <span class="subtotal_mano_obra"></span></td><!-- SUM of each line total, for products --> 
      <td>$ <span class="subtotal_genero"></span></td><!-- SUM of each line total, for customizations --> 
     </tr> 
    </tfoot> 
</table> 

私はこれを行うにしようとしました：

<tbody data-bind='foreach: lineas_pedido'> 
    <tr class="producto"> 
     <!-- All the bindings here works fine --> 
    </tr> 
    <!-- ko foreach: generos --> 
    <tr class="genero"> 
     <!-- ... --> 
    </tr> 
    <!-- /ko --> 
</tbody> 

しかし、これに来て、エラーを取得し、見た後： Knockout.js containerless "foreach" not working with <table>

だから、私はこのプラグインが見つかりました：https://github.com/mbest/knockout-repeat をそして今、私のコードは次のようになります。

<tbody data-bind='foreach: lineas_pedido'> 
    <tr class="producto"> 
     <!-- All the bindings here works fine --> 
    </tr> 
    <tr class="genero" data-bind="repeat: {foreach: generos, item: '$genero'}"> 
     <!-- ... --> 
    </tr> 
</tbody> 

私の質問は：プラグインを使用しないで、ネイティブKOのテンプレート/バインディングを使用して同じ結果を達成する方法はありますか？

ありがとうございます。

編集：

Hereはjsfiddleですが、私は私のサンプルデータ（カテゴリおよび製品）へのリンクリソースを追加しました。

Hereはテストホストの実際のコードです。

また、thisの例を開始点として使用しました。

Answer 1

私はあなたのフィドルで3つのエラーを発見しました。

1. data-bindhttp://jsfiddle.net/antishok/cxLRs/

   がここに表示されるように想定されていない：<!-- ko data-bind='foreach: generos' -->

2. 私は任意のロジックを破るしませんでしたが、私がここで修正をスペイン語:) 更新フィドルを知っていれば容易になるだろうとかなり確信LineaGenero.removerという名前の "click: remover"バインディングがありました。これは削除する親であるLineaPedidoが必要です。しかし実際の議論は現在のLineaGeneroであり、その親ではない。ここでは、正しいアプローチは、あなたが結合「click: $parent.removerLinea」

3. あなたが持っていた。このラインで行ったのと同じである：self.modeloサブスクリプションハンドラをトリガしself.modelo(undefined); 。 undefinedの値にチェックが入っていないため、エラーが発生しました。