KnockoutJS hiển thị bảng có nhiều mẫu và số cột khác nhau

Question

Tôi phải hiển thị một bảng phức tạp với số lượng cột thay đổi. Trong ví dụ này, số cột phụ thuộc vào loại của subRow. Ví dụ, nếu subRow là loại 1, nó có 3 hành động, nếu loại conRowRow là 2, nó có 4 hành động. Cùng với đó là 7 hành động, vì vậy bảng của tôi có 7 cột (+ đầu tiên hai nơi tôi làm cho subRow tên và loại (hậu duệ hoặc trẻ em vv), nhưng điều này là ít quan trọng. Hai cột đầu tiên luôn luôn hiện diện), vì vậy 7 + 2 = 9 cột. Subrows được thêm vào từ một cây (không được vẽ trên ảnh ví dụ, vì nó không liên quan đến vấn đề này).

Tôi đã làm cho nó hoạt động trong internet explorer, bởi vì tôi đang sử dụng thẻ phông chữ để móc trên một mẫu loại trực tiếp, nhưng Mozilla Firefox và google chrome không thể hiển thị điều này.

Câu hỏi của tôi là: Cách vẽ bảng này trong bảng, không có thẻ phông chữ?

Tôi sẽ không có bất cứ điều gì chống lại một số thẻ khác, miễn là Firefox một IE có thể hiển thị nó, nhưng tôi đã thử hầu hết trong số họ, và bạn không thực hiện công việc.

Mọi thứ sẽ rõ ràng hơn nhiều với mã giả và hình ảnh:

HTML:

<table> 
<thead> 
    <tr> 
     <!-- 

      So this is the table header. It defines number of columns in this table. Number of columns is variable, and this is the first part of the problem. 

     --> 
     <th class="tablehead" colspan="2">My List</th><th class="tablehead" data-bind="attr: { colspan: distinctActions().length }"> Actions </th><th class="tablehead"></th> 
    </tr> 
</thead> 

<tbody> 

<tbody data-bind="template: { name: 'rowsTemplate', foreach: rowList } "></tbody>  

</tbody> 

Row mẫu:

<script type="text/x-jquery-tmpl" id="rowsTemplate"> 
<tr> 
    <td> 
     <button data-bind="click: save, enable: editMode()">Save</button> 
    </td> 
    <td> 
     <button data-bind="click: deleteRow, enable: !editMode()">X</button> 
    </td> 
</tr> 

<!-- 

    this is the tricky part 
    for each "row" in this template i must repeat X subRows. 
    only way I found to do it is to "hook" subRowsTemplate on a <font> tag. 
    BUT the problem is only Internet Explorer is able to render this, neither 
    Mozilla Firefox or Chrome are able to do it. 

    (Everything MUST be in the same table, because of the 
    variable number of columns (defined in header)) 

--> 

<font data-bind="template: { name: 'subRowsTemplate', foreach: objectList, templateOptions: { tmpRow: $data } } "></font> 

SubRows mẫu:

</script> 

<script type="text/x-jquery-tmpl" id="subRowsTemplate"> 
<tr> 
    <td> <span data-bind="text: name"></span> </td> 
    <td> 
     <input readonly="readonly" data-bind="visible: selectorList.length>0 && !$item.tmpRow.editMode(), value: chosenSelector().label"></input> 
     <select data-bind="visible: selectorList.length>0 && $item.tmpRow.editMode(), options: selectorList, optionsText: 'label', value: chosenSelector"></select> 
    </td> 

    <!-- 

     Again the same problem as above, IF subRow IS first, i must draw ALL the actions (defined above in header). 
     So, if I have 3 actions defined in header, I must draw 3 <td> here. And again I have the same "solution", 
     which doesn't work in Mozilla and Chrome. 

    -->  

    <font data-bind="template: { name: 'actionTemplate', foreach: skill, templateOptions: { tmpParentIsFirst: isFirst, tmpObject: $data, tmpRow2: $item.tmpRow } }"> </font> 
    <td><div style="float:right;"><button data-bind="click: deleteRow">X</button></div></td> 
</tr> 

Action mẫu:

</script> 

<script type="text/x-jquery-tmpl" id="actionTemplate"> 
<td> 
    <div> 
     Content of action 
    </div> 
</td> 
</script> 

Ảnh:

Answer 1

Knockout.js 2.0 hỗ trợ kiểm soát dòng chảy containerless. Thay vào đó, bạn có thể sử dụng cú pháp nhận xét và nó hoạt động với các liên kết if, ifnot, foreach, with và template.

HERE là mã hoạt động của tác giả thư viện.

Ví dụ:

<ul> 
    <li><strong>Here is a static header item</strong></li> 
    <!-- ko foreach: products --> 
    <li> 
    <em data-bind="text: name"></em> 
    </li> 
    <!-- /ko --> 
</ul> 

Cập nhật:

HERE là một customg sửa đổi templateWithOptions ràng buộc (phiên bản gốc bởi Ryan Niemeyer). Bạn có thể chuyển các tùy chọn tới đó sẽ được ánh xạ tới mỗi thuộc tính $options trên các mục nhập.

FYI bình luận bằng cs.tropic sau khi ông đã nhận nó chạy:

sau khi kết hợp tất cả những liên kết và đoạn mã, ba foreach mẫu tác phẩm của tôi! điều quan trọng là khi bạn sử dụng các tùy chọn $, $ parent và các thẻ tương tự, bạn không được sử dụng các mẫu jquery. Vì vậy, bây giờ mã của tôi là mẫu jquery miễn phí