查看每个afterRender的时间表

时间:2014-12-15 23:00:33

标签: ember.js runloop

我希望每次呈现视图时都运行代码。我能得到的最接近的是听取每一个可以改变的属性,并在afterRender的运行循环中明确安排一些东西,但我希望只有afterRender这样的生命周期钩子。属性方法变得脆弱,因为您必须根据可能影响渲染的内容使属性列表保持最新。

控制器:

App.IndexController = Ember.Controller.extend({
  count: 0,
  actions: {
    add: function() {
      var count = this.get('count');
      count += 1;
      this.set('count', count);
    }
  }
});

查看:

App.IndexView = Ember.View.extend({
  changed: function() {
    Ember.run.scheduleOnce('afterRender', this.after);
  }.observes('controller.count'),
  after: function() {
    console.log('after render', this.$('span').text());
  }
});

模板:

<button {{action "add"}}>add</button> <span>{{count}}</span>

http://emberjs.jsbin.com/wujogejeso/3/edit?html,css,js,output

1 个答案:

答案 0 :(得分:0)

要安排代码afterRender,您可以使用didInsertElement生命周期钩子代替changed功能。

App.IndexView = Ember.View.extend({
  didInsertElement: function() {
    Ember.run.scheduleOnce('afterRender', this.after);
  },
  after: function() {
    console.log('after render', this.$('span').text());
  }
});