Knockout.js는 테이블에서 중첩 모델/컨테이너가없는 "foreach"테이블의 행을 반복합니다.

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 개의 오류를 발견했습니다.

1. data-bindhttp://jsfiddle.net/antishok/cxLRs/

   가 여기에 표시 안된다 : <!-- ko data-bind='foreach: generos' -->

2. 내가 어떤 논리를 중단하지 않았다하지만 내가 여기 수정 스페인어 : 업데이트 바이올린을 알고 있다면 쉽게 될 거라고 확신 LineaGenero.remover을 호출하는 "click: remover"바인딩이 있는데,이 부모는 제거 할 부모 인 LineaPedido이 필요합니다. 그러나 실제 인수는 부모가 아닌 현재 LineaGenero입니다. 여기에 올바른 접근 방식은 바인딩 "click: $parent.removerLinea"

3. 당신은했다이 줄을했던 것과 동일 다음 self.modelo 가입 핸들러를 트리거 self.modelo(undefined); . undefined 값에 오류가 발생했는지 확인하지 않았습니다.