Ember.js：如何在将新项目插入到ArrayController之后应用jquery插件 [英] Ember.js: How to apply a jquery plugin after new item is inserted to ArrayController

问题描述

所以我有一个ArrayController，以非常标准的方式呈现：

So I have an ArrayController which is rendered in pretty standard way:

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

我想要的是在插入新项目后应用jQuery.timeAgo插件，但要做我以某种方式获得对插入元素的引用。

What I want is to apply a jQuery.timeAgo plugin after new item have been inserted, but to do this I somehow should get a reference to the inserted element.

我尝试了 didInsertElement 方法，但只有当整个视图被渲染，我需要将这个插件应用到插入到DOM中的每个新项目。

I tried didInsertElement method but it fires only when the whole view is rendered, and I need to apply this plugin to each new item inserted into DOM.

所以，我的问题真的可以被制定成这样的 - 有什么办法可以引用新插入的DOM元素或任何回调，在新项目有被添加到ArrayController并附加到DOM？

So, my question really could be formulated something like this - is there any way to get a reference to newly inserted DOM element or any callback that fires after a new item have been added to ArrayController and appended to the DOM?

推荐答案

我建议使用无块形式的 {{each}} 帮助指定每个元素要使用的视图类。

I would recommend using the blockless form of the {{each}} helper to specify a view class to be used by each element.

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

然后定义App.AnItemView，如下所示：

Then define App.AnItemView like this:

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();
  }
});

这篇关于Ember.js：如何在将新项目插入到ArrayController之后应用jquery插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！