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个错误。肯定我没有打破任何逻辑，但它会是，如果我知道有修复此西班牙语:) 更新小提琴简单：http://jsfiddle.net/antishok/cxLRs/

1. data-bind是不应该出现在这里：<!-- ko data-bind='foreach: generos' -->

2. 您有一个名为LineaGenero.remover的“click: remover”绑定，该绑定需要一个LineaPedido父级要从中移除。但实际的论点是当前的LineaGenero，而不是它的父母。这里正确的做法是，你用结合“click: $parent.removerLinea”

3. 你有这行做了同样的：self.modelo(undefined); 从而引发了self.modelo订阅处理程序。 在那里没有检查undefined值，导致错误。