2013-04-27 2 views
7

Esiste un modo per eseguire codice personalizzato dopo che Knockout ha aggiunto l'html al DOM e il rendering completato? Ho bisogno di questo in modo da poter associare un modello di visualizzazione nidificato al codice html aggiunto dinamicamente.afterRender per il collegamento html

Qualcosa di simile:

<div data-bind="html: dynamicHtml, afterRender: customCode"></div> 

... 

MyViewModel.prototype.customCode = function(){ 
    ko.applyBindings(self.MyInnerViewModel(), document.getElementById('someTagInTheDynamicHtml')); 
}; 

afterRender non viene chiamato qui (funziona solo con il legame modello?), E un legame personalizzato non aiuta, perché il "update" evento non è garantito di essere chiamato dopo che il DOM è stato aggiornato.

risposta

12

Sì, afterRender funziona solo con associazione template.

Tuttavia, è possibile creare un gestore di binding personalizzato che tiene traccia delle modifiche di associazione html e attiva la richiamata quando il valore viene aggiornato. Il mio esempio:

ko.bindingHandlers.afterHtmlRender = { 
    update: function(el, va, ab){ 
     ab().html && va()(ab().html); 
    } 
} 

nomi param accorciate: VA - valueAccessor, ab - allBindings.

Anche la marcatura dovrebbe essere simile a quello (nome vincolante è cambiato):

<div data-bind="html: dynamicHtml, afterHtmlRender: customCode"></div> 

http://jsfiddle.net/dDDjf/

Aggiornamento

codice vincolante semplificata con le spiegazioni:

ko.bindingHandlers.afterHtmlRender = { 
    update: function(element, valueAccessor, allBindings){ 
     // check if element has 'html' binding 
     if (!allBindings().html) return; 
     // get bound callback (don't care about context, it's ready-to-use ref to function) 
     var callback = valueAccessor(); 
     // fire callback with new value of an observable bound via 'html' binding 
     callback(allBindings().html); 
    } 
} 
+0

Grazie - funziona alla grande. Penso che dovrebbe iniziare con 'ab(). Html()', no? Inoltre, potresti refactoring il codice in un modo in cui le persone possono capire cosa sta succedendo ..? – seldary

+0

No, ci dovrebbe essere 'ab(). Html'. È solo un controllo dell''esistenza vincolante * html * tra tutte le associazioni. Ho aggiornato la mia risposta con una spiegazione. –