Simple eventful interface development in Marionettejs

v_btn.js

define(['require', 'backbone.marionette', 'handlebars',
	'constants/events', 'text!../templates/v_btn.html',
	'css!../styles/buttons.css'],
function (require) {
	'use strict';

	var Backbone = require('backbone');
	var Marionette = require('backbone.marionette');
	var Handlebars = require('handlebars');
	var Events = require('constants/events');
	var template = require('text!../templates/v_btn.html');

	return Marionette.ItemView.extend({
		tagName: 'button',
		className: 'btn',
		template: Handlebars.compile(template),

		events: {
			'click': 'onClick'
		},

		defaultOptions: {
			cssClasses: 'btn-link',
			textRight: '',
			textLeft: '',
			iconName: 'chevron-left'
		},

		initialize: function(options) {
			var initOptions = _.defaults(options, this.defaultOptions);

			this.$el.addClass(initOptions.cssClasses);
			this.model = new Backbone.Model(initOptions);
		},

		onClick: function(e) {
			this.trigger(Events.BTN_CLICK);
		},
	});
});

v_layout.js

define(['require', 'app', 'backbone', 'backbone.marionette', 'handlebars',
		'constants/events',
		'constants/routes',
		'text!layouts/home/templates/l_home.html',
		'components/sidebar/views/v_main',
		'components/article-list/views/v_main',
		'components/article-viewer/views/v_main',
		'models/m_article',
		'collections/c_articles',
		'components/article-viewer-navbar/views/v_main',
		'components/article-list-navbar/views/v_main',
		'css!layouts/home/styles/l_home'],
function (require) {
	"use strict";

	var App = require('app');
	var Events = require('constants/events');
	var Routes = require('constants/routes');
	var Backbone = require('backbone');
	var Marionette = require('backbone.marionette');
	var Handlebars = require('handlebars');
	var template = require('text!layouts/home/templates/l_home.html');
	var SideBarView = require('components/sidebar/views/v_main');
	var ArticleListView = require('components/article-list/views/v_main');
	var ArticleViewerView = require('components/article-viewer/views/v_main');
	var Article = require('models/m_article');
	var Articles = require('collections/c_articles');
	var ArticleViewerNavbar = require('components/article-viewer-navbar/views/v_main');
	var ArticleListNavbar = require('components/article-list-navbar/views/v_main');

	var HomeLayout = Marionette.LayoutView.extend({
		template: Handlebars.compile(template),

		className : "home-layout sidebar-closed",

		ui: {
			"fog" : "#fog",
			"middle" : "#middle"
		},

		//@TODO add swipe
		events: {
			"click @ui.fog": "onFogClicked"
		},

		regions: {
			'sidebarRegion': '#sidebar',
			"articleListRegion" : "#article-list",
			"articleViewerRegion": '#article',
			"navbarRegion": 'header'
		},

		initialize: function() {
			App.vent.on(Events.ARTICLE_CLOSE, function(e) {
				this.closeArticle(e.referrer);
			}, this);

			App.vent.on(Events.SIDEBAR_TOGGLE, function(e) {
				this.toggleSideBar();
			}, this);

			App.vent.on(Events.ARTICLE_OPEN, function(e) {
				this.showArticle(e.model, Backbone.history.fragment);
			}, this);
		},

		onFogClicked: function(e) {
			App.vent.trigger(Events.SIDEBAR_TOGGLE);
		},

		toggleSideBar : function(state){
			this.$el.toggleClass('sidebar-closed', state);
		},

		toggleArticleViewer : function(state){
			this.$el.toggleClass('article-toggle', state);
		},

		onShow: function(){
			this.sidebarRegion.show(new SideBarView());
		},

		showArticleById: function(id, referrer) {
			var article = new Article({id: id});

			var that = this;
			article.fetch({
				success: function(model, response, options) {
					that.showArticle(model, referrer);
				},
				error: function(model, response, options) {
					Backbone.history.navigate(Routes.ARTICLE_LIST);
					that.showArticleList();
				},
			});
		},

		showArticle: function(article, referrer) {
			Backbone.history.navigate(Routes.ARTICLE + '/' + article.get('id'));

			this.articleViewer = new ArticleViewerView({model: article});
			this.articleViewerRegion.show(this.articleViewer);
			this.articleViewerRegion.$el.scrollTop(0);
			this.toggleArticleViewer();

			var navbarView = new ArticleViewerNavbar({
				referrer: referrer,
				model: article,
			});
			this.navbarRegion.show(navbarView);
		},

		closeArticle: function(referrer) {
			var navigateTo = referrer || Routes.ARTICLE_LIST;

			Backbone.history.navigate(navigateTo, false);
			this.toggleArticleViewer(false);
			this.showArticleList();
		},

		showNavbar: function() {},

		showArticleList: function() {
			var articles = new Articles();

			// TODO add local cache logic here
			articles.on('sync', function(e) {
				this.articleList = new ArticleListView({
					collection: articles
				});
				this.articleListRegion.show(this.articleList);

				this.showArticleListNavbar();
				this.toggleArticleViewer(false);
				articles.off('sync');
			}, this);

			articles.fetch();
		},

		showArticleListNavbar: function() {
			var navbarView = new ArticleListNavbar();
			this.navbarRegion.show(navbarView);
		},
	});

	return new HomeLayout();
});

v_navbar.js

define(['app', 'constants/events', 'backbone.marionette', 'handlebars',
	'components/navbar-generic/views/v_main',
	'components/navbar-buttons/views/v_btn_material'],
function (App, Events, Marionette, Handlebars, NavbarBase, LeftBtn) {
	'use strict';

	return NavbarBase.extend({
		initialize: function() {
			App.vent.on(Events.SIDEBAR_TOGGLE, function(e) {
				this.switchIcon();
			}, this);
		},

		onShow: function() {
			this.leftBtn = new LeftBtn({
				iconName: 'bars',
				cssClasses: 'btn-transparent'
			});
			this.left.show(this.leftBtn);

			this.leftBtn.on(Events.BTN_CLICK, function(e) {
				App.vent.trigger(Events.SIDEBAR_TOGGLE);
			}, this);
		},

		switchIcon: function() {
			if (this.leftBtn.currentIcon == 'bars')
				this.leftBtn.setIcon('left-arrow');
			else if (this.leftBtn.currentIcon == 'left-arrow')
				this.leftBtn.setIcon('bars');
		},
	});

});