menu-items-view.js

// This is a view for rendering only! Handle click events and shit in its parent view
var IssueDetailCommonMenuItemsView = Marionette.ItemView.extend(
{
    template: IssueDetailMenuItemsTemplate,

    onRender: function()
    {
        this.listenTo(this.model, 'change:scheduled change:published change:live', this.render, this);
    }
});

menu-view.js

var IssueDetailCommonMenuView = Marionette.ItemView.extend(
{
    className: 'menu',
    template: IssueDetailMenuTemplate,

    events: {
        'click button.unpublish': 'showConfirmDialog',
        'click button.confirm-unpublish': 'unpublish',
        'click button.delete': 'showConfirmDialog',
        'click button.confirm-delete': 'purge',
        'click .dialog button.dismiss': 'hideConfirmDialog'
    },

    onRender: function()
    {
        this.renderMenuItems();
    },

    renderMenuItems: function()
    {
        var menuItemsView = new MenuItemsView($.extend({}, this.options,
        {
            el: this.$('.menu-items')
        })).render();
    },

    showConfirmDialog: function(e)
    {
        e.stopPropagation();

        var $listitem = $(e.currentTarget).closest('li');
        $listitem.addClass('show-dialog');

        $('body').on('click.hide-confirm-dialog', function(event)
        {
            if(!$(event.target).closest('.dialog').length)
                $listitem.removeClass('show-dialog');
        });
    },

    hideConfirmDialog: function(e)
    {
        $(e.currentTarget).closest('li').removeClass('show-dialog');
        $('body').off('click.hide-confirm-dialog');
    },

    unpublish: function()
    {
        this.model.unpublish();
    },

    onDestroy: function()
    {
        $('body').off('click.hide-confirm-dialog');
    }
});