CODEWITHSUNDEEP
backbone.jshandlebars.jsmarionette
Juan Carlos Coto
Juan Carlos Coto

Reputation: 12574

How to update data after model fetch in Handlebars template with Backbone and Marionette?

Trying to have a data field in a Handlebars template update after the model that is assigned to the Marionette CompositeView is fetched, but the HTML in the page is not getting updated.

My code looks like this:

Model:

B.Page.Model = Backbone.Model.extend({
    url: function () {
        return 'my/resource/';
    },
});


View:

B.Page.CompositeView = Backbone.Marionette.CompositeView.extend({
    template: Handlebars.compile(templates.find('#my-template').html()),

    initialize: function(options) {
        _.bindAll(this);
        this.model.fetch();
    },
)};


Template:

<script id="my-template" type="text/x-handlebars-template">
    Date: <span id="my-data-field">{{data}}</span>
</script>

I have checked the resource and it does return proper JSON with the data field set. Also, the model is getting passed in to the view.

I suspect that this is due to the render function not getting called after the data is retrieved; however, I would like to get feedback on how it should be done.

What is a good way to do this?

Thanks!

EDIT: This CompositeView does have a Collection that is associated with it (which renders just fine when I trigger the appropriate event). I purposefully left out that part of the code to avoid muddying up the problem.

Upvotes: 5

Views: 3140

Answers (2)

Evan Hobbs
Evan Hobbs

Reputation: 3672

All Marionette views have a modelEvents object that is bound to the passed in model. So you could clean the accepted answer up slightly by doing:

template: Handlebars.compile(templates.find('#my-template').html()),

modelEvents: {
    'change': 'render'
}

rather than binding manually in initialize.

Upvotes: 1

zero-divisor
zero-divisor

Reputation: 610

Your are right, since a CompositeView extends from CollectionView, it only re-renders on collection events by default. To make it re-render on changes on your model, you could do something like this in your CompositeView:

initialize: function(){
    this.listenTo(this.model, "change", this.render);
}

Upvotes: 3

Related Questions