Search code examples
ember.jscoverflow

All children has rendered in collectionview Emberjs


hi I am trying to build Coverflow in emberjs using Collectionview

I guess i will be needing css calculations after all children has rendered but i am not able to do it as call back is not triggered in my case

entire bin enter link description here my collection view looks like this

App.CoverflowView = Ember.CollectionView.extend({
    items: null,
    itemSize: null,
    props: ['width', 'Width', 'left', 'Left'],
    itemWidth: null,
    itemHeight: null,
    duration: null,
    current: null,
    elementId: 'coverflow',
    createChildView: function (viewClass, attrs) {
        viewClass = App.CoverView;
        return this._super(viewClass, attrs);
    },
    onChildViewsChanged: function (obj, key) {
        console.log('check');
        var length = this.get('childViews.length');
        if (length > 0) {
            Ember.run.scheduleOnce('afterRender', this, 'childViewsDidRender');
        }
    }.observes('childViews'),
    childViewsDidRender: function () {
        console.log('childViewsDidRender - count of paragraphs: ');
    }
});

Solution

  • Regardless the needs of coverflow, i'm assuming it is required to fire the function for each view. In this setup the observer will not fire for property childViews for each child view and at first glance of the related code i don't see a property that gets set in order to observe it. So i propose a simple solution, to call the function from createChildView since this has been overriden and also keep observing the childViews property if the content changes dynamically at some point.

    Example,

    http://emberjs.jsbin.com/weleqabu/1 (look at the console)

    createChildView: function(viewClass, attrs){
        viewClass = App.CoverView;
        this.onChildViewsChanged();
        return this._super(viewClass,attrs);
      }