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

Question

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.

Answer 1

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);
}