Knockout.js为嵌套模型/无容器重复表中的行；foreach“；内桌_Knockout.js

Knockout.js为嵌套模型/无容器重复表中的行；foreach“；内桌

knockout.js

Knockout.js为嵌套模型/无容器重复表中的行；foreach“；内桌,knockout.js,Knockout.js,我正在构建一个应用程序来跟踪定制产品的订单。每个产品都可以有许多定制的细节。向订单添加产品和自定义每个产品的屏幕应如下所示： <button>+</button> <table> <thead> <tr> <th></th> <th>Produ

我正在构建一个应用程序来跟踪定制产品的订单。每个产品都可以有许多定制的细节。向订单添加产品和自定义每个产品的屏幕应如下所示：

<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>
    <tr class="genero" data-bind="repeat: {foreach: generos, item: '$genero'}">
        <!-- ... -->
    </tr>
</tbody>

+
产品
摩洛
康蒂达
Unitario
马诺德奥布拉酒店
慷慨的
-
产品
摩洛
$ 
+
-
慷慨的
$ 
小故事
$ 
$

我尝试过这样做：

<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>

但在得到错误并查看之后，得出以下结论：

所以，我找到了这个插件：现在我的代码如下所示：

<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>
    <tr class="genero" data-bind="repeat: {foreach: generos, item: '$genero'}">
        <!-- ... -->
    </tr>
</tbody>

我的问题是：有没有办法避免使用插件，并使用原生KO模板/绑定实现相同的结果

提前谢谢

编辑：

是JSFIDLE，我添加了一个链接到示例数据（类别和产品）的资源

是测试主机上的实际代码

此外，我还以示例作为起点。

我在您的小提琴中发现了3个错误。我很确定我没有违反任何逻辑，但如果我懂西班牙语会更容易：）更新的fiddle修复程序如下：

数据绑定不应出现在此处：


您有一个“click:remover
”绑定，该绑定名为relegenero.remover
，它需要一个lineapedo
，它是要从中删除的父项。但实际的参数是当前的沿袭者，而不是它的父代。这里的正确方法与绑定“单击：$parent.removerLinea
”的方法相同
您有这样一行：self.modelo（未定义）
它触发了self.modelo订阅处理程序。
没有签入未定义的值，导致错误

我在你的小提琴上发现了三处错误。我很确定我没有违反任何逻辑，但如果我懂西班牙语会更容易：）
更新的fiddle修复程序如下：
数据绑定不应出现在此处：

您有一个“click:remover
”绑定，该绑定名为relegenero.remover
，它需要一个lineapedo
，它是要从中删除的父项。但实际的参数是当前的沿袭者，而不是它的父代。这里的正确方法与绑定“单击：$parent.removerLinea
”的方法相同
您有这样一行：self.modelo（未定义）
它触发了self.modelo订阅处理程序。
没有签入未定义的值，导致错误

如果你在网站上贴一把小提琴，人们会更容易帮助你，也许你可以重新制作这把小提琴：。我很想知道当您在tbody内部使用无容器foreach时，错误来自何处。您提供的示例非常有效，因此我认为我的错误在其他地方。您可以在更新版本和我的网站中看到代码。希望你能帮忙。谢谢如果你在网站上贴一把小提琴，人们会更容易帮助你，也许你可以重新制作这把小提琴：。我很想知道当您在tbody内部使用无容器foreach时，错误来自何处。您提供的示例非常有效，因此我认为我的错误在其他地方。您可以在更新版本和我的网站中看到代码。希望你能帮忙。谢谢