andandandand
andandandand

Reputation: 22260

MarionetteJS: updating all ItemViews in a CompositeView after a 'change' event in the DOM

After I change an input text field that corresponds to a single attribute in an ItemView, I update all models in my CompositeView.

The update works fine in the models, but only the ItemView corresponding to the last edited input text field displays new attributes in the DOM, as it's the only element in the CompositeView that's getting its onRender method called:

   onRender: function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }

I want to call the onRender() function again in all the ItemViews inside the CompositeView. How can I do this?

Upvotes: 0

Views: 707

Answers (2)

Scott
Scott

Reputation: 469

Not the most elegant solution, but here goes

var childViews = compositeView.children._views;
_.each(childViews, function(childView){
    childView.render();
});

Upvotes: 1

andandandand
andandandand

Reputation: 22260

After reading what appears in this question, and the checking out the documentation. I figured that I would try simply using a change event listener in the ItemView.

myItemView = Backbone.Marionette.ItemView.extend({

    initialize: function() {
        /*bind change event, will get onRender fired when the probability gets updated
        this.model.bind('change', this.onRender);
        error: 'cannot call' Cannot call method 'toJSON' of undefined
        TODO: figure out WHY this is an error but this.render is OK*/

        this.model.bind('change', this.render);
    }

Mysteriously, onRender() fails, but render() does the job. Now I want to figure out why.

Upvotes: 1

Related Questions