KnockoutJS rendering di una tabella con più modelli e numero variabile di colonne

Question

Devo rendere una tabella complessa con numero variabile di colonne. In questo esempio il numero di colonne dipende dal tipo di subRow. Ad esempio, se la subRow è di tipo 1, ha 3 azioni, se il tipo subRow è 2, ha 4 azioni. Insieme sono 7 azioni, quindi la mia tabella ha 7 colonne (+ le prime due in cui mostro il nome e il tipo di subRow (discendenti o figli ecc.), Ma questo è meno importante.le prime due colonne sono sempre presenti, quindi 7 + 2 = 9 colonne. I sottotitoli vengono aggiunti da un albero (non disegnati sull'immagine di esempio, perché non è rilevante per questo problema).

L'ho fatto funzionare in internet explorer, perché sto usando il tag font per agganciare un modello a eliminazione diretta a, ma Mozilla Firefox e google chrome non sono in grado di renderlo visibile.

La mia domanda è: come disegnare questo nella tabella, senza il tag del font?

Non avrei nulla contro qualche altro tag, fintanto che Firefox un IE può renderlo, ma ho provato la maggior parte di loro, e il tuo non fa il lavoro.

Tutto sarà molto più chiaro con pseudo codice e l'immagine:

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

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

subrighe Template:

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

Azione Template:

</script> 

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

Immagine:

Answer 1

Knockout.js 2.0 supporta flusso di controllo containerless. Puoi invece utilizzare la sintassi dei commenti e funziona con le associazioni if, ifnot, foreach, with e template.

HERE è un codice funzionante dell'autore della libreria.

Esempio:

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

Aggiornamento:

HERE è un customg modificato templateWithOptions vincolante (la versione originale di Ryan Niemeyer). È possibile passare a opzioni che verranno mappate su ciascuna proprietà $options sugli elementi di input.

FYI un commento di cs.tropic dopo aver ottenuto in esecuzione:

dopo aver combinato tutti questi link e frammenti di codice, le mie triple foreach opere template! La cosa fondamentale è che, quando usi $ options, $ parent e tag simili, non devi usare template jquery. Quindi ora il mio codice è modello jquery gratuito