重新渲染后的Marionette ItemView事件

Question

i'm playing with Marionette first time. After re-rendering ItemViews, their events not triggered. Simple example:

App = new Marionette.Application;

App.addRegions({
    headerRegion: '#header',
    contentRegion: '#content',
});

App.addInitializer(function () {
    this.Views = {
        MainMenu : new MainMenuView(),
        ContentOne : new ContentOneView(),
        ContentTwo : new ContentTwoView(),
    };
});

App.addInitializer(function () {
    var self = this;
    var eva = self.vent;
    eva.listenTo(self.Views.MainMenu, 'content1', function () {
        self.contentRegion.show(self.Views.ContentOne);
    });
    eva.listenTo(self.Views.MainMenu, 'content2', function () {
        self.contentRegion.show(self.Views.ContentTwo);
    });
});

App.on('start', function () {
    var self = this;
    self.contentRegion.show(self.View.ContentOne);
});

App.start();

After re-rendering ContentOneView & ContentTwoView, their events not triggered. What i'm doing wrong?

Answer 1

The problem you are having is that region.show() is going to close any view that is currently occupying that region. Doing so undelegates the view's events. After the initial region.show() you should manually call render on the view.

You can see this explained here and an issue discussing it here .

Answer 2

I managed to solve this problem by using delegating the events when the view is shown in the layout:

layoutView.content.show(contentView);
contentView.delegateEvents();

Although this is only necessary after the first render as mentioned by Andrew Hubbs

Answer 3

instead of using eva to listen to events that happen on the views, try listening to eva for events passed by other views

App.addInitializer(function () {
    var eva = self.vent;
    var self = this;
    this.listenTo(eva, 'someStringHere', function(){/*do stuff here*/};
});

and then in your views you can trigger events through eva/vent

var eva = self.vent;
eva.trigger("someStringHere");