Render a Marionette region after model has been fetched

Question

I would like to use the approach described by Derick Bailey in "A Generic Problem Solution" in this thread to render a view after a model is fetched. I will report his solution here:

 MyView = Backbone.View.extend({
  initialize: function(){
    this.model.on("sync", this.render, this);
  },

  render: function(){ ... }
});


myModel = new MyModel({id: someId});
new MyView({
  model: myModel
});

myModel.fetch();

I have a slightly different situation: my view is inside a region layout. If I call the Marionette.Region.show() it works but the view is rendered twice. Calling Marionette.Region.attachView() the view render's function is called once but the content is not displayed in the page.

Any idea?

Answer 1

You can wait until the model is sync'd before rendering the view

var myView = new MyView({
  model: myModel
});

myModel.on("sync", function(){
  myRegion.show(myView);
});

myModel.fetch();

Answer 2

I have come up with a slightly different approach. I neede my views to load their own models on initalize, so Derick's approach was not really working for me. There were several reasons which I don't want to explain here. But I came was this:

I created a default template called with loading indicator and spinner, which I attach to template of the view. I have a method called updateView, which is triggered once the model syncs and replaces the loading template with real template and calls render() afterwards.

Maybe someone will also find it useful.

var myView = new MyView({
     template: loader,
     initialize : function(){
        this.model = new MyModel();
        this.model.on("sync", this.updateView, this);
        this.model.fetch();
     },
     updateView : function(){
        this.template = myTemplate;
        this.render();
     }
});