Backbone.Marionette: Fix code style

591dbb7e · Sindre Sorhus · ffff5854 · 591dbb7e · 591dbb7e · 591dbb7e
Commit 591dbb7e authored Nov 03, 2012 by Sindre Sorhus
8 changed files
--- a/labs/architecture-examples/backbone_marionette/.jshintignore
+++ b/labs/architecture-examples/backbone_marionette/.jshintignore
-js/lib/underscore.js
+js/lib
-js/lib/backbone.js
-js/lib/backbone.marionette.js
-js/lib/backbone-localStorage.js
--- a/labs/architecture-examples/backbone_marionette/README.md
+++ b/labs/architecture-examples/backbone_marionette/README.md
 # Backbone.Marionette TodoMVC app
-Backbone.Marionette is a composite application library for Backbone.js that aims to simplify the construction of large scale JavaScript applications. It is a collection of common design and implementation patterns found in the applications that Derick Bailey has been building with Backbone, and includes various pieces inspired by composite application architectures, such as Microsoft's "Prism" framework.
+[Backbone.Marionette](http://marionettejs.com) is a composite application library for Backbone.js that aims to simplify the construction of large scale JavaScript applications. It is a collection of common design and implementation patterns found in the applications that Derick Bailey has been building with Backbone, and includes various pieces inspired by composite application architectures, such as Microsoft's "Prism" framework.
 This implementation of the application uses Marionette's module system. Variations using RequireJS and a more classic approach to JavaScript modules are also [available](https://github.com/marionettejs/backbone.marionette/wiki/Projects-and-websites-using-marionette).
--- a/labs/architecture-examples/backbone_marionette/index.html
+++ b/labs/architecture-examples/backbone_marionette/index.html
@@ -13,13 +13,13 @@
 			<span id="todo-count"><strong></strong> items left</span>
 			<ul id="filters">
 				<li>
-				<a href="#">All</a>
+					<a href="#">All</a>
 				</li>
 				<li>
-				<a href="#active">Active</a>
+					<a href="#active">Active</a>
 				</li>
 				<li>
-				<a href="#completed">Completed</a>
+					<a href="#completed">Completed</a>
 				</li>
 			</ul>
 			<button id="clear-completed">Clear completed</button>

--- a/labs/architecture-examples/backbone_marionette/js/TodoMVC.Layout.js
+++ b/labs/architecture-examples/backbone_marionette/js/TodoMVC.Layout.js
-TodoMVC.module("Layout", function(Layout, App, Backbone, Marionette, $, _){
+TodoMVC.module('Layout', function(Layout, App, Backbone, Marionette, $, _) {
 	// Layout Header View
 	// ------------------
 	Layout.Header = Backbone.Marionette.ItemView.extend({
-		template : "#template-header",
+		template: '#template-header',
 		// UI bindings create cached attributes that
 		// point to jQuery selected objects
-		ui : {
+		ui: {
-			input : '#new-todo'
+			input: '#new-todo'
 		},
 		events : {
-			'keypress #new-todo':		'onInputKeypress'
+			'keypress #new-todo': 'onInputKeypress'
 		},
-		onInputKeypress : function(evt) {
+		onInputKeypress: function(e) {
 			var ENTER_KEY = 13;
 			var todoText = this.ui.input.val().trim();
-			if ( evt.which === ENTER_KEY && todoText ) {
+			if ( e.which === ENTER_KEY && todoText ) {
 				this.collection.create({
-					title : todoText
+					title: todoText
 				});
 				this.ui.input.val('');
 			}
@@ -33,17 +33,17 @@ TodoMVC.module("Layout", function(Layout, App, Backbone, Marionette, $, _){
 	// ------------------
 	Layout.Footer = Backbone.Marionette.Layout.extend({
-		template : "#template-footer",
+		template: '#template-footer',
 		// UI bindings create cached attributes that
 		// point to jQuery selected objects
-		ui : {
+		ui: {
-			count   : '#todo-count strong',
+			count: '#todo-count strong',
-			filters : '#filters a'
+			filters: '#filters a'
 		},
-		events : {
+		events: {
-			'click #clear-completed' : 'onClearClick'
+			'click #clear-completed': 'onClearClick'
 		},
 		initialize : function() {
@@ -51,19 +51,14 @@ TodoMVC.module("Layout", function(Layout, App, Backbone, Marionette, $, _){
 			this.bindTo(this.collection, 'all', this.updateCount, this);
 		},
-		onRender : function() {
+		onRender: function() {
 			this.updateCount();
 		},
-		updateCount : function() {
+		updateCount: function() {
 			var count = this.collection.getActive().length;
 			this.ui.count.html(count);
+			this.$el.parent().toggle(count > 0);
-			if (count === 0) {
-				this.$el.parent().hide();
-			} else {
-				this.$el.parent().show();
-			}
 		},
 		updateFilterSelection : function(filter) {
@@ -73,7 +68,7 @@ TodoMVC.module("Layout", function(Layout, App, Backbone, Marionette, $, _){
 				.addClass('selected');
 		},
-		onClearClick : function() {
+		onClearClick: function() {
 			var completed = this.collection.getCompleted();
 			completed.forEach(function destroy(todo) {
 				todo.destroy();

--- a/labs/architecture-examples/backbone_marionette/js/TodoMVC.TodoList.Views.js
+++ b/labs/architecture-examples/backbone_marionette/js/TodoMVC.TodoList.Views.js
-TodoMVC.module("TodoList.Views", function(Views, App, Backbone, Marionette, $, _){
+TodoMVC.module('TodoList.Views', function(Views, App, Backbone, Marionette, $, _) {
 	// Todo List Item View
 	// -------------------
@@ -7,48 +7,52 @@ TodoMVC.module("TodoList.Views", function(Views, App, Backbone, Marionette, $, _
 	// that are made to the item, including marking completed.
 	Views.ItemView = Marionette.ItemView.extend({
-		tagName : 'li',
+		tagName: 'li',
-			template : "#template-todoItemView",
+			template: '#template-todoItemView',
-			ui : {
+			ui: {
-				edit : '.edit'
+				edit: '.edit'
 			},
 			events : {
-				'click .destroy' : 'destroy',
+				'click .destroy': 'destroy',
-				'dblclick label' : 'onEditClick',
+				'dblclick label': 'onEditClick',
-				'keypress .edit' : 'onEditKeypress',
+				'keypress .edit': 'onEditKeypress',
-				'click .toggle'  : 'toggle'
+				'click .toggle' : 'toggle'
 			},
-			initialize : function() {
+			initialize: function() {
 				this.bindTo(this.model, 'change', this.render, this);
 			},
-			onRender : function() {
+			onRender: function() {
 				this.$el.removeClass('active completed');
-				if (this.model.get('completed')) this.$el.addClass('completed');
-				else this.$el.addClass('active');
+				if (this.model.get('completed')) {
+					this.$el.addClass('completed');
+				} else {
+					this.$el.addClass('active');
+				}
 			},
-			destroy : function() {
+			destroy: function() {
 				this.model.destroy();
 			},
-			toggle  : function() {
+			toggle: function() {
 				this.model.toggle().save();
 			},
-			onEditClick : function() {
+			onEditClick: function() {
 				this.$el.addClass('editing');
 				this.ui.edit.focus();
 			},
-			onEditKeypress : function(evt) {
+			onEditKeypress: function(e) {
 				var ENTER_KEY = 13;
 				var todoText = this.ui.edit.val().trim();
-				if ( evt.which === ENTER_KEY && todoText ) {
+				if ( e.which === ENTER_KEY && todoText ) {
 					this.model.set('title', todoText).save();
 					this.$el.removeClass('editing');
 				}
@@ -62,40 +66,40 @@ TodoMVC.module("TodoList.Views", function(Views, App, Backbone, Marionette, $, _
 	// filtering of activs vs completed items for display.
 	Views.ListView = Backbone.Marionette.CompositeView.extend({
-		template : "#template-todoListCompositeView",
+		template: '#template-todoListCompositeView',
-			itemView : Views.ItemView,
+			itemView: Views.ItemView,
-			itemViewContainer : '#todo-list',
+			itemViewContainer: '#todo-list',
-			ui : {
+			ui: {
-				toggle : '#toggle-all'
+				toggle: '#toggle-all'
 			},
 			events : {
-				'click #toggle-all' : 'onToggleAllClick'
+				'click #toggle-all': 'onToggleAllClick'
 			},
-			initialize : function() {
+			initialize: function() {
 				this.bindTo(this.collection, 'all', this.update, this);
 			},
-			onRender : function() {
+			onRender: function() {
 				this.update();
 			},
-			update : function() {
+			update: function() {
-				function reduceCompleted(left, right) { return left && right.get('completed'); }
+				function reduceCompleted(left, right) {
+					return left && right.get('completed');
+				}
 				var allCompleted = this.collection.reduce(reduceCompleted,true);
-				this.ui.toggle.prop('checked', allCompleted);
-				if (this.collection.length === 0) {
+				this.ui.toggle.prop('checked', allCompleted);
-					this.$el.parent().hide();
+				this.$el.parent().toggle(!!this.collection.length);
-				} else {
-					this.$el.parent().show();
-				}
 			},
-			onToggleAllClick : function(evt) {
+			onToggleAllClick: function(e) {
-				var isChecked = evt.currentTarget.checked;
+				var isChecked = e.currentTarget.checked;
 				this.collection.each(function(todo){
 					todo.save({'completed': isChecked});
 				});
@@ -108,7 +112,7 @@ TodoMVC.module("TodoList.Views", function(Views, App, Backbone, Marionette, $, _
 	// Handler for filtering the list of items by showing and
 	// hiding through the use of various CSS classes
-	App.vent.on('todoList:filter',function(filter) {
+	App.vent.on('todoList:filter', function(filter) {
 		filter = filter || 'all';
 		$('#todoapp').attr('class', 'filter-' + filter);
 	});

--- a/labs/architecture-examples/backbone_marionette/js/TodoMVC.TodoList.js
+++ b/labs/architecture-examples/backbone_marionette/js/TodoMVC.TodoList.js
-TodoMVC.module("TodoList", function(TodoList, App, Backbone, Marionette, $, _){
+TodoMVC.module('TodoList', function(TodoList, App, Backbone, Marionette, $, _) {
 	// TodoList Router
 	// ---------------
@@ -6,8 +6,8 @@ TodoMVC.module("TodoList", function(TodoList, App, Backbone, Marionette, $, _){
 	// Handle routes to show the active vs complete todo items
 	TodoList.Router = Marionette.AppRouter.extend({
-		appRoutes : {
+		appRoutes: {
-			"*filter": "filterItems"
+			'*filter': 'filterItems'
 		}
 	});
@@ -17,7 +17,7 @@ TodoMVC.module("TodoList", function(TodoList, App, Backbone, Marionette, $, _){
 	// Control the workflow and logic that exists at the application
 	// level, above the implementation detail of views and models
-	TodoList.Controller = function(){
+	TodoList.Controller = function() {
 		this.todoList = new App.Todos.TodoList();
 	};
@@ -33,29 +33,29 @@ TodoMVC.module("TodoList", function(TodoList, App, Backbone, Marionette, $, _){
 			this.todoList.fetch();
 		},
-		showHeader: function(todoList){
+		showHeader: function(todoList) {
 			var header = new App.Layout.Header({
 				collection: todoList
 			});
 			App.header.show(header);
 		},
-		showFooter: function(todoList){
+		showFooter: function(todoList) {
 			var footer = new App.Layout.Footer({
 				collection: todoList
 			});
 			App.footer.show(footer);
 		},
-		showTodoList: function(todoList){
+		showTodoList: function(todoList) {
 			App.main.show(new TodoList.Views.ListView({
 				collection : todoList
 			}));
 		},
 		// Set the filter to show complete or all items
-		filterItems: function(filter){
+		filterItems: function(filter) {
-			App.vent.trigger("todoList:filter", filter.trim() || "");
+			App.vent.trigger('todoList:filter', filter.trim() || '');
 		}
 	});
@@ -66,15 +66,13 @@ TodoMVC.module("TodoList", function(TodoList, App, Backbone, Marionette, $, _){
 	// when the the application is started, pulling in all of the
 	// existing Todo items and displaying them.
-	TodoList.addInitializer(function(){
+	TodoList.addInitializer(function() {
 		var controller = new TodoList.Controller();
 		new TodoList.Router({
 			controller: controller
 		});
 		controller.start();
 	});
 });
--- a/labs/architecture-examples/backbone_marionette/js/TodoMVC.Todos.js
+++ b/labs/architecture-examples/backbone_marionette/js/TodoMVC.Todos.js
-TodoMVC.module("Todos", function(Todos, App, Backbone, Marionette, $, _){
+TodoMVC.module('Todos', function(Todos, App, Backbone, Marionette, $, _) {
 	// Todo Model
 	// ----------
@@ -7,16 +7,18 @@ TodoMVC.module("Todos", function(Todos, App, Backbone, Marionette, $, _){
 		localStorage: new Backbone.LocalStorage('todos-backbone-marionettejs'),
 		defaults: {
-			title     : '',
+			title: '',
-			completed : false,
+			completed: false,
-			created   : 0
+			created: 0
 		},
-		initialize : function() {
+		initialize: function() {
-			if (this.isNew()) this.set('created', Date.now());
+			if (this.isNew()) {
+				this.set('created', Date.now());
+			}
 		},
-		toggle  : function() {
+		toggle: function() {
 			return this.set('completed', !this.isCompleted());
 		},
@@ -41,7 +43,7 @@ TodoMVC.module("Todos", function(Todos, App, Backbone, Marionette, $, _){
 			return this.reject(this._isCompleted);
 		},
-		comparator: function( todo ) {
+		comparator: function(todo) {
 			return todo.get('created');
 		},

--- a/labs/architecture-examples/backbone_marionette/js/TodoMVC.js
+++ b/labs/architecture-examples/backbone_marionette/js/TodoMVC.js
 var TodoMVC = new Backbone.Marionette.Application();
 TodoMVC.addRegions({
-	header : '#header',
+	header: '#header',
-	main   : '#main',
+	main: '#main',
-	footer : '#footer'
+	footer: '#footer'
 });
-TodoMVC.on("initialize:after", function(){
+TodoMVC.on('initialize:after', function() {
 	Backbone.history.start();
 });