刪除嵌套模板中的按鈕用戶界面問題 - Knockout.js

我現在好20個小時有點麻煩。我正在使用knockout.js並動態添加/刪除html表中的行。我有在刪除按鈕顯示一個額外的列麻煩動態，我的模板是：刪除嵌套模板中的按鈕用戶界面問題 - Knockout.js

<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'中的刪除按鈕，它會被子模板覆蓋。我的模型是List>。如何以及在哪裏可以添加刪除按鈕？

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

我環顧四周，發現afterRender後添加方法，但他們不會解決問題。注：列數是未知的（因此我爲字段名&列的值一個通用類）

來源

2014-09-30 Ali Baig

你可以創建一個工作演示（小提琴/段）來說明一個簡單的形式問題。很難想象你遇到的問題。 – Tanner 2014-09-30 11:07:09

Hi @Tanner，jsfiddle鏈接：http://jsfiddle.net/br627uu5/ 我簡化了幾件事。我想在每行之後刪除一個按鈕。 – 2014-09-30 11:24:27

你可以當它被渲染的最後一個字段（grootboek）的LineItemDataTemplate模板添加一個額外的<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>

來源

2014-09-30 12:17:32 manji

謝謝你做了這個訣竅:) – 2014-09-30 12:34:37

刪除嵌套模板中的按鈕用戶界面問題 - Knockout.js

回答

相關問題