Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Marionette ItemView how to re-render model on change

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.

like image 959
Vadim Ivanov Avatar asked Jun 01 '13 20:06

Vadim Ivanov


2 Answers

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());
     }
like image 173
Fizer Khan Avatar answered Nov 07 '22 02:11

Fizer Khan


Actually, Backbone and Marionette are smart enough to do it.
Problem was in template and data as I found it another question. So, I re-checked everything and got result.

like image 3
Vadim Ivanov Avatar answered Nov 07 '22 03:11

Vadim Ivanov