jsviews table dynamique colonne

Question

J'essaie de faire une table avec un tableau de colonnes pour activer les colonnes à afficher, mais je veux être en mesure d'utiliser le lien, mais en utilisant comme ci-dessous ne met pas à jour en utilisant le obeservable setProperty. Ce que j'ai fini actuellement par faire était d'abord de générer un modèle basé sur la collection de colonnes et d'utiliser ce modèle pour générer la table.

Alors, j'aimerais savoir s'il existe un moyen de le faire dans un seul modèle?

<table id="test"><tbody></tbody></table> 
<script> 
    var columns = [{field:"Id"}, {field:"Name"}]; 
    var data = {rows:[{Id:1, Name:"a", Bla:"bla"},{Id:2, Name:"b", Bla:"bla"}]}; 
    var tmpl = "{^{for rows}}<tr>{^{for ~columns}}<td>{^{:#parent.parent.data[field]}}</td>{{/for}}</tr>{{/for}}"; 

    $.templates(tmpl).link("#test tbody", data, { columns: columns }); 

    var d = $.view($("#test tbody tr")[0]).data; 
    $.observable(d).setProperty("Name", "c"); 
</script> 

Answer 1

Voici une approche que vous pouvez utiliser:

<table id="test"><tbody></tbody></table> 

<script type="text/x-jsrender" id="tmpl"> 
    {^{for rows}} 
     <tr> 
      {^{props}} 
       {{if ~inColumns(key)}} 
        <td>{^{:prop}}</td> 
        <td><input data-link="prop"/></td> 
       {{/if}} 
      {{/props}} 
     </tr> 
    {{/for}} 
</script> 

<script> 
    var columns = ["Id", "Name"]; 

    var data = { 
     rows:[{Id:1, Name:"a", Bla:"bla"},{Id:2, Name:"b", Bla:"bla"}] 
    }; 

    $.templates("#tmpl").link("#test tbody", data, { 
     inColumns: function(key) { 
      return $.inArray(key, columns) !== -1; 
     } 
    }); 

    var d = $.view($("#test tbody tr")[0]).data; 

    $.observable(d).setProperty("Name", "c"); 
</script> 

Avec la prochaine mise à jour, il y aura une nouvelle qui disposent de cartes de données fournira une approche alternative. Je vais probablement mettre à jour cette réponse, une fois que c'est disponible.