중첩 템플릿 안의 버튼 UI 문제 제거 - Knockout.js

Question

지금은 20 시간에서 조금 문제가 있습니다. knockout.js를 사용하고 html 테이블에서 행을 동적으로 추가/삭제합니다. 동적으로 내 템플릿이 제거 버튼을 위해 여분의 열을 표시에 문제가 있어요 : 내가 'LineItemDataTemplate'템플릿에서 버튼을 제거 추가하는 경우

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

, 그것은 모든 열 후 제거 버튼을 렌더링 (의미가). 그리고 'LineItemsBodyScript'에서 제거 버튼을 추가하면 자식 템플릿에 의해 덮어 씌워집니다. 내 모델은 List>입니다. 어디서 어떻게 제거 버튼을 추가 할 수 있습니까?

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

나는 주위를 둘러 보았고 afterRender afterAdd 메서드를 발견했지만 문제를 해결하지는 않습니다. 참고 : 열 번호

Answer 1

당신은 마지막 필드 (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>