Ember.js：どのように新しい項目の後にjQueryプラグインを適用するにはArrayController

Question

に挿入されているので、私はかなり標準的な方法でレンダリングされるArrayControllerを持っている：私が欲しいもの

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

はjQuery.timeAgoを適用することです新しい項目が挿入された後のプラグインですが、これを行うには何とか挿入された要素への参照を取得する必要があります。

私はdidInsertElementメソッドを試しましたが、ビュー全体がレンダリングされた場合にのみ発生します。このプラグインをDOMに挿入された新しいアイテムに適用する必要があります。

私の質問は本当にこういうものです - 新しいアイテムがArrayControllerに追加されDOMに追加された後に新たに挿入されたDOM要素やコールバックへの参照を取得する方法はありますか？要素が挿入されるたびにトリガーされますあなたの配列、上セットアップオブザーバー -

1：

Answer 1

私が指定する{{each}}ヘルパーのブロックレス形式を使用することをお勧めします各要素で使用されるビュークラス。

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

次に、このようApp.AnItemViewを定義します。

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

私は2つの可能性を参照してください。しかし、あなたは新しい要素への参照を自動的に取得しません。

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

2 - 独自のビュー（例：App.ListItemView）であなたのリスト項目をラップしdidInsertElementイベントを使用します。

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

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