How to change model and render Marionette view from another view

Question

I' ve got LayoutView in Marionette. Give only onRender method:

onRender: function() {            
            this.showChildView("content", new CanvasView({ model: this.model }));
            this.showChildView("library", new LibraryView());
            this.showChildView("properties", new PropertiesView({ model: this.model }));
        }

In content there is a model, that contains svg elements(for ex. line, ellipse...) with their properties. I need to change model in PropertiesView. For example I need to change line width or color and rerender "content" child view. How could I do this? PropertiesView consists of input sets. For example:

Line color: <input type="text" id="id_2" name="style" value= <%= lineColor %>>	

Answer 1

You can use Backbone event system. Every time you set anything to your model the change event fires.

In PropertiesView you can add some events for user interaction. On every input set it content to model:

ui: {
    'style': 'input[name=style]'
},
events: {
    'input @ui.style': 'onInputStyle'
},
onInputStyle: function(){
    this.model.set('style', this.ui.style.val());
}

And in CanvasView subscribe to them and change your view accordingly:

modelEvents: {
    'change:style': 'onChangeStyle'
},
onChangeStyle: function(){
    this.$el.attr('style', this.model.get('style'));
}