Ember.js: Come applicare un plugin jQuery dopo il nuovo elemento viene inserito per ArrayController

Question

Così ho un ArrayController che viene reso in modo abbastanza standard:

<ul> 
    {{#each controller}} 
    <li>{{ user.name }} : {{message}} <abbr class="timeago" title="{{unbound datetimeFormatted}}">{{unbound datetimeFormatted}}</abbr></li> 
    {{/each}} 
</ul> 

Quello che voglio è quello di applicare una jQuery.timeAgo plugin dopo l'inserimento di un nuovo elemento, ma per fare ciò in qualche modo dovrei ottenere un riferimento all'elemento inserito.

Ho provato il metodo didInsertElement ma si attiva solo quando viene visualizzata l'intera vista e devo applicare questo plug-in a ogni nuovo elemento inserito in DOM.

Quindi, la mia domanda potrebbe davvero essere formulata in questo modo: esiste un modo per ottenere un riferimento all'elemento DOM appena inserito o qualsiasi callback che si attiva dopo che un nuovo elemento è stato aggiunto a ArrayController e aggiunto al DOM?

Answer 1

mi consiglia di utilizzare la forma blockless del {{each}} aiutante per specificare una classe vista da usare per ogni elemento.

<ul>{{each controller itemViewClass="App.AnItemView"}}</ul> 

quindi definire App.AnItemView come questo:

App.AnItemView = Ember.View.extend({ 
    template: Ember.Handlebars.compile('{{ user.name }} : {{message}} <abbr class="timeago" title="{{unbound datetimeFormatted}}">{{unbound datetimeFormatted}}</abbr>'), 
    didInsertElement : function(){ 
    this.$().timeago(); 
    } 
}); 

Answer 2

vedo 2 possibilità:

1 - Impostazione di un osservatore sulla matrice, che viene sparato ogni volta che si inserisce un elemento. Ma non ottieni automaticamente un riferimento al nuovo elemento.

yourObserver : function(){ 
    ... 
}.observes("content.@each") 

2 - Avvolgere le voci di elenco in un proprio punto di vista (ad esempio: App.ListItemView) e utilizzare l'evento didInsertElement:

{{#each}} 
    {{#view App.ListItemView}} 
    <li>... </li> 
    {{/view}} 
{{/each}} 

App.ListItemView = Ember.View.extend({ 
    didInsertElement : function(){ 
    this.$().timeago(); 
    } 
}