마리오네트 레이아웃 :보기 onclick 덮어 쓰기

Question

완벽하게 작동하는 레이아웃보기가 있습니다. 네 개의 하위보기 중 하나에는 "이벤트"를 만드는 단추가 있습니다. 클릭하면 별도의 추가 이벤트보기로 자식보기가 바뀌길 바란다.

기본 레이아웃 논리 또는 하위보기에서 추가 이벤트보기를 실행할지 여부를 확신 할 수 없습니다.

하는 index.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", 
    '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/item.html"], function(Marionette, Template) { 
    "use strict"; 
    return Backbone.Marionette.ItemView.extend({ 
    template: Template, 
    tagName: "li" 
    }) 
}) 

이 이벤트/collection.js 내부에 넣으려고했으나 ou가 삭제되었습니다. 항목보기

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 요소 직접 그 레이아웃의 템플릿 관련이 없습니다하는 이벤트를 결합하는 것입니다.