Marionette ItemView how to re-render model on change

backbone.jsmarionette

I'm using Handlebars template engine.
so, I have Model:

Backbone.Model.extend({
        urlRoot: Config.urls.getClient,
        defaults: {
            contract:"",
            contractDate:"",
            companyTitle:"",
            contacts:[],
            tariff: new Tariff(),
            tariffs: [],
            remain:0,
            licenses:0,
            edo:""
        },
        initialize:function(){
            this.fetch();
        }
    });

then Marionette ItemView:

Marionette.ItemView.extend({
        template : templates.client,
        initialize: function () {
            this.model.on('change', this.render, this);
        },
        onRender: function () {
            console.log(this.model.toJSON());
         }      
    });

and then I call everything as:

new View({
    model : new Model({id:id})
        })

and, it's immediately render a view for me and this is cool.
But after the model fetched data it's trigger "change", so I see in console serialised model twice, and I see for first time empty model and then filled one.

But, the view is NOT updated.

How I can fix it?

P.S. I understand, that I can call a render method on fetch done callback. But I also need it for further actions, when user will change model.

Best Answer

In the View, You can use following code 

    modelEvents: {
        'change': 'render'
    }

instead of 

   initialize: function () {
        this.model.on('change', this.render, this);
    },
    onRender: function () {
        console.log(this.model.toJSON());
     }
Related Topic