KnockoutJS representa una tabla con varias plantillas y número variable de columnas

Question

Tengo que representar una tabla compleja con un número variable de columnas. En este ejemplo, el número de columnas depende del tipo de la subRow. Por ejemplo, si subRow es tipo 1, tiene 3 acciones, si el tipo subRow es 2, tiene 4 acciones. Juntos son 7 acciones, por lo que mi tabla tiene 7 columnas (+ las dos primeras donde represento el nombre y tipo de subRow (descendiente o hijos, etc.), pero esto es menos importante. Estas dos primeras columnas están siempre presentes, así que 7 + 2 = 9 columnas Las subrazas se agregan desde un árbol (no se dibujan en la imagen de ejemplo, porque no es relevante para este problema).

Lo hice funcionar en Internet Explorer, porque estoy usando la etiqueta font para engancharme en una plantilla knockout, pero Mozilla Firefox y google chrome no pueden renderizar esto.

Mi pregunta es: ¿Cómo dibujar esto en la tabla, sin la etiqueta font?

No tendría nada en contra de alguna otra etiqueta, siempre y cuando Firefox un IE pueda procesarla, pero probé la mayoría de ellas, y tú no haces el trabajo.

Todo será mucho más clara con el pseudo código y la imagen:

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> 

Plantilla Fila:

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

subfilas Plantilla:

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

plantilla de acción:

</script> 

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

foto:

Answer 1

Knockout.js 2.0 apoya flujo de control sin contenedor. Puede usar la sintaxis de comentarios en su lugar y funciona con los enlaces if, ifnot, foreach, with y template.

HERE es un código de trabajo del autor de la biblioteca.

Ejemplo:

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

Actualización:

HERE es una customg modificado templateWithOptions unión (versión original por Ryan Niemeyer). Puede pasar opciones que se asignarán a cada propiedad $options en los elementos de entrada.

FYI un comentario de cs.tropic después de que él tiene que correr:

después de combinar todos estos fragmentos de código de enlace y, mis triples foreach obras plantilla! Lo más importante es que cuando usa $ opciones, $ parent y etiquetas similares, no debe usar plantillas de jquery. Así que ahora mi código es plantilla jquery gratis