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/

data-bind不应出现在此处：
您有一个名为click: remover的“LineaGenero.remover”绑定，该绑定需要LineaPedido从中移除父级。但实际的论点是当前的LineaGenero，而不是它的父母。这里的正确方法与绑定“click: $parent.removerLinea”
你有这一行：self.modelo(undefined); 它触发了self.modelo订阅处理程序。没有检查undefined值，导致错误。

Knockout.js在表格中为表格中的嵌套模型/无容器“foreach”重复行

1 个答案: