ember.js - 如何通知父视图子视图中的图像已在emberjs中加载

Question

当其中一个子视图中的图像完全加载并出现在 dom 中时，如何通知父视图？加载所有图像后，我需要测量所有孩子的完整高度。由于测量它didInsertElement的高度不正确（它返回没有图像高度的高度）。

所以这就是我的视图结构的样子：

{{#view App.ArtistBoxesView}}
  {{#each artist in controller}}
    {{#view App.ArtistBoxView}}
      <div class="artist">
        <div class="thumb">{{styledmediaitem artist.thumb style="thumb"}}</div>
      </div>
    {{/view}}
  {{/each}}
{{/view}}

哪里styledmediaitem是一个把手助手，它输出一个<img src=""/>到服务器的正确路径。

我想在ArtistBoxesView图像（甚至更好：当所有图像）ArtistBoxView完全预加载时收到通知。

Answer 1

考虑在视图的 didInsertElement fx 中使用jQuery ImagesLoaded 插件。这样的事情应该可以解决问题：

App.ArtistBoxView = Ember.View.extend({ 
  didInsertElement: function() {
    this.$().imagesLoaded( function( $images, $proper, $broken ) {
      console.log( $images.length + ' images total have been loaded' );
      console.log( $proper.length + ' properly loaded images' );
      console.log( $broken.length + ' broken images' );
    });
  }
});