如何改变模型和渲染木偶视图从另一个视图

How to change model and render Marionette view from another view

本文关键字：视图 另一个 何改变 改变 模型      更新时间：2023-09-26

我在木偶里有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元素(例如line, ellipse…)及其属性。我需要在PropertiesView改变模型。例如，我需要改变线宽或颜色，并呈现"内容"子视图。我怎么能这么做?PropertiesView由输入集组成。例如:

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

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

在PropertiesView中，你可以为用户交互添加一些事件。对于每个输入，将其内容设置为model:

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'));
}
相关文章：