ember.js: Jak zastosować plugin jquery po nowy element jest wstawiany do ArrayController

Question

Mam więc ArrayController który jest renderowany w dość standardowy sposób:

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

co chcę zastosować jQuery.timeAgo plugin po wstawieniu nowego elementu, ale aby to zrobić, powinienem uzyskać odniesienie do wstawionego elementu.

Próbowałem metody didInsertElement, ale uruchamia się tylko wtedy, gdy renderowany jest cały widok i muszę zastosować tę wtyczkę do każdego nowego elementu wstawionego do DOM.

Moje pytanie może być sformułowane w ten sposób - czy istnieje sposób na uzyskanie odniesienia do nowo wstawionego elementu DOM lub dowolnego wywołania zwrotnego, które zostanie wywołane po dodaniu nowego elementu do ArrayController i dołączeniu do DOM?

Answer 1

Polecam za pomocą formularza blockless z {{each}} pomocnika do określenia klasa widoku używana przez każdy element.

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

Następnie określić App.AnItemView tak:

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

widzę 2 możliwości:

1 - Konfiguracja obserwatora na swojej tablicy, która pobiera opalane każdym elementem jest włożona. Ale nie otrzymujesz automatycznie odwołania do nowego elementu.

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

2 - owinąć elementów listy w własnym widzenia (np App.ListItemView) i użyć zdarzenia didInsertElement:

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

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