Cause Knockout pour redessiner les colonnes de données en fonction des modifications apportées à mon modèle de colonne lors de l'utilisation des nœuds tempate

Question

Mon scénario de problème est presque identique à this one mais la table que je dessine contient des cellules TD avec des liaisons plus complexes, chaque liaison étant unique à la colonne étant liée. Parfois, c'est juste le HTML qui est unique.

En d'autres termes, il est pas assez bon pour boucler les colonnes à l'aide d'un databind=foreach et simplement un nid <TD> qui fait un text obligatoire.

je peux obtenir ma table pour rendre le tirage au sort de la première page, en utilisant un template{nodes:xxx} de liaison, où je passe dans un tableau de noeuds DOM .. comme ceci:

<table> 
     <thead> 
      <tr> 
       <!-- ko foreach: ColumnModel.VisibleColumns --> 
       <th data-bind="click:$root.ColumnModel.ColumnSortClick,text:ColName"></th> 
       <!-- /ko --> 
      </tr> 
     </thead> 
     <tbody> 
      <!-- ko template: { nodes: ColumnModel.getRowTmplNodes(), foreach: DataItems} --> 
      <!-- /ko --> 
     </tbody> 
    </table> 

La documentation indique que les DOM nœuds vous passer à cette variable ne doit pas être un observableArray. Ainsi, comme vous pouvez l'imaginer, lorsque j'autorise les utilisateurs à mettre à jour le modèle de colonne, seules mes étiquettes d'en-tête changent dans le < THEAD>, mais les colonnes de données ne sont pas mises à jour.

Que dois-je faire?

Answer 1

Résolu en utilisant une liaison de knock-out personnalisé described originally here by Michael Best

HTML:

<table> 
    <thead> 
     <tr> 
     <!-- ko foreach: ColumnModel.VisibleColumns --> 
      <th data-bind="click:$root.ColumnModel.Column_Click" style="cursor:pointer;"><span data-bind="visible:SortDirection,css:IconClass" style="font-size:small"></span><span data-bind="text:ColName"></span></th> 
     <!-- /ko --> 
     </tr> 
    </thead> 
    <tbody data-bind="foreach:{data:DataItems,as:'thg'}"> 
     <tr data-bind="nodes: $root.ColumnModel.getRowTemplate()"></tr>     
    </tbody> 
</table> 

KO réspectés:

//THANK YOU, MICHAEL BEST: 
ko.bindingHandlers.nodes = { 
    init: function() { 
    return {controlsDescendantBindings: true}; 
    }, 
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) { 
    var nodes = ko.unwrap(valueAccessor()); 
    ko.virtualElements.setDomNodeChildren(element, nodes); 
    ko.applyBindingsToDescendants(bindingContext, element); 
    } 
}; 
ko.virtualElements.allowedBindings.nodes = true;