EmberJS View - 检测是不是所有子视图都已呈现

Posted 2023-02-26

【中文标题】EmberJS View - 检测是不是所有子视图都已呈现

【英文标题】：EmberJS View - detect if all children views have been renderedEmberJS View - 检测是否所有子视图都已呈现

【发布时间】：2013-04-19 19:19:51

【问题描述】：

场景：

笔记集合（异步加载）被渲染 两个视图：表示笔记列表的 NoteView 和表示单个笔记的 NoteOnListView 我必须运行一些代码 (masonry.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 等到它的所有子元素都被渲染？

【参考方案1】：

如果您将策略更改为子类化 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!     
    
 );

这是一个 example，它在 Ember 1.0 RC2 中演示了这种技术。

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

【讨论】：

很好的答案。使用 scheduleOnce 而不是 schedule 可能会很有用，以避免在同一个运行循环中多次意外调用 childViewsDidRender。

感谢您的回答。我尝试了使用集合视图的方法。问题是，当我将类类型更改为 CollectionView 时，视图未绑定到路由并且未呈现。我希望它被用作默认视图，但我没有在网上找到任何资源如何做到这一点。 CollectionView 文档建议该类用于静态项目，这不是我的用例。顺便说一句，目前，我每次渲染项目时都会调用 Masonry，它工作正常。

哇，太棒了！我将不得不查看Ember.run。 "afterRender" 部分是如何工作的？

@Knownasilya 请参阅source 了解更多信息。