CODEWITHSUNDEEP
jquerybackbone.jsrequirejsmarionette
Renjith
Renjith

Reputation: 524

Backbone Marionette Composite view onRender executing twice

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?

Upvotes: 2

Views: 1630

Answers (2)

Derick Bailey
Derick Bailey

Reputation: 72888

What version of Marionette are you using? There was a bug that caused this in v1.0.0-beta1: https://github.com/marionettejs/backbone.marionette/issues/287

it was fixed in v1.0.0-beta2 (latest release is v1.0.0-beta3 as of writing this)

Upvotes: 0

Ingro
Ingro

Reputation: 2841

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.

Upvotes: 2

Related Questions