EmberJS视图-检测是否所有子视图都已渲染

EmberJS View - detect if all children views have been rendered

本文关键字：视图 检测 是否 EmberJS      更新时间：2023-09-26

场景：

  • 呈现笔记集合(异步加载(
  • 两个视图：表示注释列表的NoteView和表示单个注释的NoteOnListView
  • 我必须运行一些代码(mastery.js(来放置它们，但它需要首先呈现所有笔记，它需要知道这些孩子的数量和属性

我有一个模板，notes.hjs:

{{#each note in controller}}
    {{view App.NoteOnListView}}
{{/each}}

和视图：

App.NotesView = Ember.View.extend({
    didInsertElement: function() {
        console.log('the list has been rendered');
    }
});
App.NoteOnListView = Ember.View.extend({
    didInsertElement: function() {
        console.log('a note has been inserted');
    },
    afterRender: function() {
        console.log('a note has been rendered');
    }
});

控制台输出：

the list has been rendered 
XHR finished loading: "http://localhost:3000/notes"
a note has been rendered
a note has been inserted
a note has been rendered
a note has been inserted
// ... 
a note has been rendered
a note has been inserted
// This is where I need to run code!

我对这个问题有一些可能的解决方案，但所有的方案看起来都很粗糙。有没有一种好的方法可以告诉NotesView等待它的所有子项都被渲染？

如果您将策略更改为子类化Ember.CollectionView，则可以使用以下方法来接收子视图已完成渲染的通知。

App.CV = Ember.CollectionView.extend( {
    itemViewClass : Ember.View.extend( {
        templateName : 'item'
    } ),
    onChildViewsChanged : function( obj, key ){
        var length = this.get( 'childViews.length' );
        if( length > 0 ){
            Ember.run.scheduleOnce( 'afterRender', this, 'childViewsDidRender' );
        }
    }.observes( 'childViews' ),
    childViewsDidRender : function(){
        //child views have finished rendering!     
    }
} );

下面是一个在Ember1.0RC2中演示此技术的示例。

有关Ember.run.scheduleOnce的更多信息，请参阅文档。

相关文章：