javascript - 如何更改模型并从另一个 View 渲染 Marionette View

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 中的模型。例如，我需要更改线宽或颜色并重新渲染“内容” subview 。我怎么能这样做呢？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 中订阅它们并相应地更改您的 View :

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