knockoutjs afterRender function in foreach binding

Question

Sto tentando di specificare un effetto di ingresso sugli elementi che vengono inseriti utilizzando un binding foreach knockoutjs. Molto semplice configurazione:

myViewModel.myObservableArray.push({enter:function() { ... }); 

e nella marcatura:

foreach:{data:myObservableArray, afterRender:enter} 

sembra come dovrebbe funzionare ... giusto? Ma non trova la funzione di invio sull'elemento. Quello che ho trovato funziona è:

myViewModel.enter = function(something, item) { item.enter(); }; 

foreach:{data:myObservableArray, afterRender:$root.enter} 

l'aggiunta di una funzione di immettere alla vista del modello principale e vincolante afterRender a $ root.enter. Enter viene quindi passato l'elemento come secondo parametro, quindi a sua volta può chiamare la funzione di inserimento dell'oggetto, ma sembra un trucco.

Qualcuno può spiegare cosa sta succedendo qui?

Grazie.

EDIT:

Per chiarire Ho creato un fiddle.

Ciò che fa è molto semplice, ed è coperto in modo più approfondito nel animated transitions example. Sta eseguendo una funzione nel modello di visualizzazione radice per ciascun elemento dom inserito utilizzando l'associazione foreach.

Quindi la domanda è: cosa succede se desidero le funzioni afterRender, afterAdd o beforeRemove specifiche dell'oggetto? Potrei vedere questo essere utile. Soprattutto se si utilizza l'associazione del modello per selezionare dinamicamente un modello (note 4). C'è un modo pulito per farlo? In questo momento ho una funzione enter nella radice del modello di visualizzazione che chiama semplicemente la funzione enter sull'elemento, ma come ho detto sopra questo sembra un trucco.

Answer 1

No, questo è il modo it was designed.

Dal Documenation:

Nota 3: Utilizzo “AfterRender”, “afterAdd”, e “beforeRemove”

A volte si potrebbe desiderare di eseguire su misura logica post-elaborazione sugli elementi DOM generati dai tuoi modelli. Ad esempio, se stai utilizzando una libreria di widget JavaScript come l'interfaccia utente di jQuery, potresti voler intercettare l'output dei modelli in modo da poter eseguire comandi dell'interfaccia utente jQuery su di essa per trasformare alcuni elementi renderizzati in selettori di date, cursori o qualunque altra cosa.

In generale, il modo migliore per effettuare tale post-elaborazione su elementi DOM è quello di scrivere un custom binding, ma se si vuole veramente solo per accedere agli elementi DOM prime emessi da un modello, è possibile utilizzare AfterRender.

passare un riferimento funzione (o un valore letterale di funzione, o dare il nome di una funzione sul vostro vista del modello), e Knockout invocherà subito dopo il rendering o ri-rendering del modello.

(sottolineatura mia)

---

Come si dice, un legame personalizzato è un altro modo per farlo, e può essere migliore a seconda di ciò che la funzione enter() fa.

Answer 2

sottolineatura antirimbalzo (_.debounce) è una grande soluzione in tal caso.

modello

data-bind=" template: {foreach:myObservableArray, afterRender: runWhenAllRenderDone } 

funzione antirimbalzo verrà eseguita se AfterRender non viene generato negli ultimi 100 milisecond.

var runWhenAllRenderDone = _.debounce(myFunction, 100); 

function myFunction(){ 
    //do some task but do it for once only 
} 

non è fantastico?