5

したがって、かなり標準的な方法でレンダリングされる ArrayController があります。

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

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

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

したがって、私の質問は実際には次のように定式化できます-新しく挿入されたDOM要素への参照、または新しいアイテムがArrayControllerに追加されてDOMに追加された後に発生するコールバックを取得する方法はありますか?

4

2 に答える 2

5

ヘルパーのブロックレス形式を{{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();
  }
});
于 2013-01-08T18:31:46.853 に答える
2

私は2つの可能性を見ます：

1-配列にオブザーバーを設定します。オブザーバーは、要素が挿入されるたびに起動されます。ただし、新しい要素への参照は自動的には取得されません。

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();
  }
}
于 2013-01-08T18:22:07.180 に答える