木偶布局：覆盖一个视图onclick

Question

我有一个完美的布局视图。在四个子视图的其中一个中，有一个按钮用于创建“事件”。点击时，我想将子视图替换为单独的添加事件视图。

我不确定添加事件视图是在主布局逻辑中还是在子视图内触发。

index.js（布局父视图）

define([ 
    "marionette", 
    'app/views/images/collection', 
    'app/views/topPosts/collection', 
    'app/views/clients/collection', 
    'app/views/events/collection', 
    "tpl!app/templates/index.html" 
], 
    function(Marionette, ImagesView, TopPostsView, ClientsView, EventsView, template) { 
    "use strict"; 
    var AppLayout, layout; 
    AppLayout = Backbone.Marionette.Layout.extend({ 
     template: template(), 
     regions: { 
     collection1: '#images', 
     collection2: '#topPosts', 
     collection3: '#clients', 
     collection4: '#events' 
     }, 
     onRender: function() { 
     this.collection1.show(new ImagesView()) 
     this.collection2.show(new TopPostsView()) 
     this.collection3.show(new ClientsView()) 
     this.collection4.show(new EventsView()) 
     } 
    }) 
    return new AppLayout() 
    }) 

事件/ collection.js（我相信会开除了自身替换视图）

define(["marionette", "text!app/templates/events/collection.html", "app/collections/events", "app/views/events/item", 'app/views/events/create'], function (Marionette, Template, Collection, Row, CreateEventView) { 
    "use strict" 
    return Backbone.Marionette.CompositeView.extend({ 
    template: Template, 
    itemView: Row, 
    itemViewContainer: "ul", 
    events: { 
     'click #createEvent': 'onClickCreateEvent' 
    }, 
    onClickCreateEvent: function() { 
     //render create form over the events collection 
    }, 
    initialize: function() { 
     this.collection = new Collection() 
     return this.collection.fetch() 
    } 
    }) 
}) 

事件/ item.js（模型查看上面的集合）

define(["marionette", "text!app/templates/events/item.html"], function(Marionette, Template) { 
    "use strict"; 
    return Backbone.Marionette.ItemView.extend({ 
    template: Template, 
    tagName: "li" 
    }) 
}) 

我试着把这个里面的事件/ collection.js，但它只是抹ou t项目视图

onClickCreateEvent: function() { 
     this.$el = new CreateEventView().$el 
     this.$el.render(); return this; 
    }, 

Answer 1

该事件将在包含被单击元素的视图中触发。但是，只要您不在事件中调用stopPropagation()，事件就会传播到父视图。尽管如此，CompositeView不应该负责替换自己;该责任应该给父视图（我相信AppLayout）。处理的意见交换的一种方式是这样的：

// index.js 
AppLayout = Backbone.Marionette.Layout.extend({ 
    ... 
    events: { 
    'click #createEvent': 'onClickCreateEvent' 
    }, 
    ... 
    onClickCreateEvent: function(e) { 
    this.collection4.show(new CreateEventsView()); 
    }, 
    ... 

一个缺点这种方法是的DOM元素要绑定的事件没有直接关系到布局的模板。