Emberjs - 如何在访问其子项之前等待模板完全呈现

Question

有没有办法等待模板完全呈现,然后通过视图访问其子项,例如使用jquery？

didInsertElement似乎没有像我预期的那样工作.在完全构造模板之前,我需要额外增加半秒延迟.模板迭代控制器中的数组并创建几个div.即使我覆盖了didInsertElement,这些div也无法立即访问.

Answer 1

我最近在Ember中添加了一些更优雅的东西:afterRender队列.请参阅此提交,特别是有关使用示例的测试.

Answer 2

我不知道你如何插入这些childViews,但有一种方法,如下:

didInsertElement: function(){
  if (this.$().find(".myAwesomeChildViews").length > 0) {  // <-- adapt this to your needs
     // my childViews are inserted
  } else {
     Ember.run.next(this, function() {
        this.didInsertElement();
     });
  }
}

这里重要的是,在检查计算结果为true之前,将继续调用didInsertElement().

更好的是,您可以按如下方式重构它:

Ember.View.reopen({
    didInsertElement: function() {
        this._super();
        this.setIsRendered();
    },

     setIsRendered: function() {
        if (!!this.$()) {
            this.set('isRendered', true);
        } else {
            Ember.run.next(this, function() {
                this.setIsRendered();
            });
        }
    },
});

然后在你看来:

App.MyView = Ember.View.extend({
   areMyChildViewsRendered: function() {
      return this.get('childViews').everyProperty('isRendered');
   }.property('chilViews.@each.isRendered')
});