在Ember.CollectionView渲染结束时运行jquery

时间:2012-11-24 03:39:54

标签: ember.js

我有 ContainerView ,其中包含 CollectionView 。在屏幕上显示 CollectionView 之后,我需要执行一个jquery函数,它基本上会查看渲染模板的内容并执行一些显示修改。

如果我在 CollectionView didInsertElement 中执行该jquery,它可以正常运行,但是对于 CollectionView 中的每个元素都执行了真的只需要在最后完成一次。我该如何指定?

http://jsfiddle.net/JFqNr/(注意不会在jsfiddle或某些原因上呈现,只是为了向您显示结构)

App = Ember.Application.create();

App.FooContainerView = Ember.ContainerView.extend({
    childViews: ['elementList'],    

    elementList: Ember.CollectionView.extend({
        content: function() {
            return [
                { Title: "Dashboard", ID: "dashboard" },
                { Title: "Invoices", ID: "invoices" },
                { Title: "Expenses", ID: "expenses" },
                { Title: "People", ID: "people" },
                { Title: "Reports", ID: "reports" },
                { Title: "Settings", ID: "settings" }
            ];
        }.property(),        
       template: Ember.Handlebars.compile( '{{view.content.title}}' ),

       didInsertElement: function() {
             // perform jquery function            
       }
    }),

   didInsertElement: function() {
         // does not work if perforemed here
   }    
});

App.initialize();
​

1 个答案:

答案 0 :(得分:4)

执行此操作的功能最近才添加到主分支中,因此您需要编译自己的Ember版本。
现在,您可以安排进入afterRender队列,以便在渲染完所有单个视图后运行。

App.FooContainerView = Ember.ContainerView.extend({
  // Existing code
  didInsertElement: function() {
    Ember.run.scheduleOnce('afterRender', this, function(){
      // perform jQuery function here;
    });
 }

有关代码详情,请参阅https://github.com/emberjs/ember.js/pull/1528