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值，導致錯誤。