Question

假设我在ember.js中有一个CollectionView。

最初，假设content属性绑定到具有少量元素的数组。 CollectionView将呈现这些元素，一旦它们在DOM中，就会调用didInsertElement，首先是每个childView，最后是CollectionView本身。

我们假设content更改（例如添加新项目或完全替换数组）。 CollectionView会追加新的孩子，或者完全取代孩子。相应地更新DOM。但是没有didInsertElement要求CollectionView。

我想在对DOM进行所有更改后运行一些自定义JS。类似于didRerenderElement或didUpdateElement钩子。

我尝试了什么但不起作用？

我无法将此代码放在CollectionView的didInsertElement中，因为每次数组更改和DOM更新时都不会触发此代码。
我尝试观察content，但观察者总是会在实际DOM更新发生之前触发。

我尝试过观察childViews，但情况类似。

一个对我有用的模糊解决方案是：

App.MyCollectionView = Ember.View.extend({ childrenReady: 1, // anything, value doesn't matter itemViewClass: Ember.View.extend({ didInsertElement: function () { this.get('parentView').notifyPropertyChange('childrenReady'); } }), childrenGotReady: function () { if (this.get('childViews').everyProperty('state', 'inDOM')) { // run that custom JS code here (e.g. apply jQuery masonry to the elements) } }.observes('childrenReady') });

但这太模糊了，也容易出现其他问题。

我读过这个：How can I run code any time part of an Ember view is rerendered?，但这不适用于CollectionView。

我在我的应用程序的很多部分遇到过这个问题，我真的希望emberjs有一个标准的方法。

Answer 1

这是一个观察子元素数组的示例观察者，并在所有子元素都触发didInsertElement时回调。

addOnDidInsertObserver: function(children, callback) {
    var options = {
        willChange: function() {},
        didChange: function(children, removing, adding) {
            var insertedChildren = [];
            adding.forEach(function(added) {
                var onInsertElement = function() {
                    // remove this call back now (cleanup)
                    added.off('didInsertElement', onInsertElement)
                    // capture the child
                    insertedChildren.push(added);
                    // if all of the new children are rendered, fire
                    if (insertedChildren.length == adding.length) {
                        callback(insertedChildren);
                    }
                };

                added.on('didInsertElement', onInsertElement);
            });
        }
    };

    children.addEnumerableObserver(this, options);
    return {'context':this, 'children':children, 'options':options};
}

removeOnDidInsertObserver: function(observer) {
    observer.children.removeEnumerableObserver(observer.context, observer.options);
},

Answer 2

didInsertElement也适用于collectionView。Source。但不应直接操作CollectionView的childViews属性。而是添加，删除，替换其内容属性中的项目。这将触发对其呈现的HTML的适当更改。还调用didInsertElement。

使用ember.js，如何在重新呈现CollectionView时收到通知？

2 个答案: