How to update data after model fetch in Handlebars template with Backbone and Marionette?
backbone.js, handlebars.js, marionette
Solution
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);
}
Problem
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.