删除嵌套模板中的按钮 UI 问题 - Knockout.js答案

【问题标题】：Remove button UI issue inside nested templates - Knockout.js删除嵌套模板中的按钮 UI 问题 - Knockout.js
【发布时间】：2014-11-24 23:30:59
【问题描述】：

我在 20 个小时后遇到了一些麻烦。我正在使用 knockout.js 并从 html 表中动态添加/删除行。我无法动态显示删除按钮的额外列，我的模板是：

 <table class="tg">
    <tbody data-bind="template: {name: 'LineItemsBodyScript', foreach: LineItemFields, afterRender: addRowRemoveButton}"></tbody>
</table>

 //template that gets called from HTML table.
 <script id="LineItemsBodyScript" type="text/html">
    <!-- ko ifnot: isFirsElement($index) -->
        <tr data-bind="template: {name: 'LineItemDataTemplate', foreach: $data }"></tr>
    <!-- /ko -->
</script>

//template called inside the template
<script id="LineItemDataTemplate" type="text/html">
       <td><input type="text" data-bind="value: FieldValue, visible: IsVisible, enable: IsUpdatable" class="table-column" /></td>
</script>

如果我在“LineItemDataTemplate”模板中添加删除按钮，它会在每一列之后呈现删除按钮（有意义）。如果我在“LineItemsBodyScript”中添加删除按钮，它会被子模板覆盖。我的模型是，列表>。我如何以及在哪里可以添加删除按钮？

 <td><input type='button' value="Remove" /></td>

我环顾四周，发现 afterRender afterAdd 方法，但它们并不能解决问题。注意：列数未知（因此我为列名和列值创建了一个通用类）

【问题讨论】：

您能否创建一个工作演示（fiddle/sn-p）以简单的形式说明问题。很难想象您遇到的问题。
嗨@Tanner，jsfiddle 链接：jsfiddle.net/br627uu5 我在那里简化了一些事情。我想要一个删除按钮在每一行之后。

标签： javascript jquery knockout.js knockout-mvc

【解决方案1】：

您可以在 LineItemDataTemplate 模板中为不是标题行的每一行的最后一个字段 (grootboek) 呈现额外的 <td>：

最后一个字段时间：$index() == $parentContext.$data.length - 1
不是标题行（第一行）：$parentContext.$index() > 0

结果：

<script id="LineItemDataTemplate" type="text/html">
    <td><input type="text"
               data-bind="value: FieldValue, visible: IsVisible,
                          enable: IsUpdatable" 
               class="table-column" /></td>
    <!-- ko if: $parentContext.$index() > 0 
                && $index() == $parentContext.$data.length - 1 -->
    <td>
        <button data-bind="click: removeLineItem">Remove</button>
    </td>
    <!-- /ko -->
</script>

【讨论】：