Backbone Marionette Composite view onRender executing twice

Question

I am having a backbone marionette composite view as follow

VideosView = Backbone.Marionette.CompositeView.extend({
        template : videosTpl,
        id : "video",
        itemView : VideoView,

        initialize : function() {
                 //fetching the collection 
            var myVideos = new VideoCollection();
            myVideos.fetch();
            this.collection = myVideos;
        },
        appendHtml : function(collectionView, itemView) {
            //appending each videos to the video list
            console.log("appendHtml");
            collectionView.$("ul").append(itemView.el);

        },
        onRender: function(){
            console.log("onRender");

        },
        onShow: function(){
            console.log("onShow");

        }
    });

The output in the console is

• onRender
• onShow
• 4 appendHtml
• onRender

The expected code flow according to backbone marionette was

• 4 appendHtml
• onRender
• onShow

How this happen?

Answer 1

That may be because you are fetching the data in the initialize function? A fetch cause a collection.reset() and so your Composite view will be re-rendered as stated in the documentation:

"The model and collection for the composite view will re-render themselves under the following conditions:

• When the collection's "reset" event is fired, it will only re-render the collection within the composite, and not the wrapper template..."

In fact when you assign to this.collection the value of myVideos you are not guaranteed that fetch() has done its job, due to the async nature of Javascript.

Try something like that when you call VideosView:

var myVideos = new VideoCollection();

myVideos.fetch({success:function(){

    var View = new VideosView({collection:myVideos});
}});

Of course now you can blank out your initialize function.