如何更改模型并从另一个视图渲染 Marionette 视图

Question

我在 Marionette 中有 LayoutView。只给 onRender 方法：

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

内容中有一个模型，其中包含 svg 元素（例如直线、椭圆...）及其属性。我需要在 PropertiesView 中更改模型。例如，我需要更改线宽或颜色并重新渲染 "content" 子视图。我怎么能这样做？ PropertiesView 由输入集组成。例如：

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

Answer 1

您可以使用 Backbone event system。每次您为模型设置任何内容时，都会触发 change 事件。

在 PropertiesView 中，您可以为用户交互添加一些事件。在每个输入上将其内容设置为模型：

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

并在 CanvasView 中订阅它们并相应地更改您的视图：

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

如何更改模型并从另一个视图渲染 Marionette 视图

How to change model and render Marionette view from another view

javascript

render

marionette