Skip to content

Commit

Permalink
Backbone.Marionette - code style
Browse files Browse the repository at this point in the history
  • Loading branch information
sindresorhus committed Mar 9, 2013
1 parent 6f25047 commit c07b9e2
Show file tree
Hide file tree
Showing 5 changed files with 23 additions and 44 deletions.
36 changes: 18 additions & 18 deletions labs/architecture-examples/backbone_marionette/index.html
Expand Up @@ -6,6 +6,22 @@
<title>Marionette • TodoMVC</title> <title>Marionette • TodoMVC</title>
<link rel="stylesheet" href="components/todomvc-common/base.css"> <link rel="stylesheet" href="components/todomvc-common/base.css">
<link rel="stylesheet" href="css/app.css"> <link rel="stylesheet" href="css/app.css">
</head>
<body>
<section id="todoapp">
<header id="header"></header>
<section id="main"></section>
<footer id="footer"></footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>
Created by <a href="http://github.com/jsoverson">Jarrod Overson</a>
and <a href="http://github.com/derickbailey">Derick Bailey</a>
using <a href="http://marionettejs.com">Backbone.Marionette</a>
</p>
<p>Further variations on the Backbone.Marionette app are also <a href="https://github.com/marionettejs/backbone.marionette/wiki/Projects-and-websites-using-marionette">available</a>.</p>
</footer>
<script type="text/html" id="template-footer"> <script type="text/html" id="template-footer">
<span id="todo-count"><strong></strong><span></span></span> <span id="todo-count"><strong></strong><span></span></span>
<ul id="filters"> <ul id="filters">
Expand Down Expand Up @@ -38,22 +54,6 @@ <h1>todos</h1>
<label for="toggle-all">Mark all as complete</label> <label for="toggle-all">Mark all as complete</label>
<ul id="todo-list"></ul> <ul id="todo-list"></ul>
</script> </script>
</head>
<body>
<section id="todoapp">
<header id="header"></header>
<section id="main"></section>
<footer id="footer"></footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>
Created by <a href="http://github.com/jsoverson">Jarrod Overson</a>
and <a href="http://github.com/derickbailey">Derick Bailey</a>
using <a href="http://marionettejs.com">Backbone.Marionette</a>
</p>
<p>Further variations on the Backbone.Marionette app are also <a href="https://github.com/marionettejs/backbone.marionette/wiki/Projects-and-websites-using-marionette">available</a>.</p>
</footer>
<!-- vendor libraries --> <!-- vendor libraries -->
<script src="components/todomvc-common/base.js"></script> <script src="components/todomvc-common/base.js"></script>
<script src="components/jquery/jquery.js"></script> <script src="components/jquery/jquery.js"></script>
Expand All @@ -68,8 +68,8 @@ <h1>todos</h1>
<script src="js/TodoMVC.TodoList.Views.js"></script> <script src="js/TodoMVC.TodoList.Views.js"></script>
<script src="js/TodoMVC.TodoList.js"></script> <script src="js/TodoMVC.TodoList.js"></script>
<script> <script>
$(function(){ $(function () {
// Start the TodoMVC app (defined in js/TodoMVC.js) // start the TodoMVC app (defined in js/TodoMVC.js)
TodoMVC.start(); TodoMVC.start();
}); });
</script> </script>
Expand Down
Expand Up @@ -2,10 +2,8 @@
'use strict'; 'use strict';


TodoMVC.module('Layout', function (Layout, App, Backbone) { TodoMVC.module('Layout', function (Layout, App, Backbone) {

// Layout Header View // Layout Header View
// ------------------ // ------------------

Layout.Header = Backbone.Marionette.ItemView.extend({ Layout.Header = Backbone.Marionette.ItemView.extend({
template: '#template-header', template: '#template-header',


Expand Down Expand Up @@ -34,7 +32,6 @@ TodoMVC.module('Layout', function (Layout, App, Backbone) {


// Layout Footer View // Layout Footer View
// ------------------ // ------------------

Layout.Footer = Backbone.Marionette.Layout.extend({ Layout.Footer = Backbone.Marionette.Layout.extend({
template: '#template-footer', template: '#template-footer',


Expand All @@ -61,12 +58,12 @@ TodoMVC.module('Layout', function (Layout, App, Backbone) {
}, },


updateCount: function () { updateCount: function () {
var count = this.collection.getActive().length, var count = this.collection.getActive().length;
length = this.collection.length, var length = this.collection.length;
completed = length - count; var completed = length - count;

this.ui.count.html(count); this.ui.count.html(count);
this.ui.itemsString.html(' ' + (count === 1 ? 'item' : 'items') + ' left'); this.ui.itemsString.html(' ' + (count === 1 ? 'item' : 'items') + ' left');

this.$el.parent().toggle(length > 0); this.$el.parent().toggle(length > 0);


if (completed > 0) { if (completed > 0) {
Expand All @@ -87,10 +84,9 @@ TodoMVC.module('Layout', function (Layout, App, Backbone) {


onClearClick: function () { onClearClick: function () {
var completed = this.collection.getCompleted(); var completed = this.collection.getCompleted();
completed.forEach(function destroy(todo) { completed.forEach(function (todo) {
todo.destroy(); todo.destroy();
}); });
} }
}); });

}); });
Expand Up @@ -2,13 +2,11 @@
'use strict'; 'use strict';


TodoMVC.module('TodoList.Views', function (Views, App, Backbone, Marionette, $) { TodoMVC.module('TodoList.Views', function (Views, App, Backbone, Marionette, $) {

// Todo List Item View // Todo List Item View
// ------------------- // -------------------
// //
// Display an individual todo item, and respond to changes // Display an individual todo item, and respond to changes
// that are made to the item, including marking completed. // that are made to the item, including marking completed.

Views.ItemView = Marionette.ItemView.extend({ Views.ItemView = Marionette.ItemView.extend({
tagName: 'li', tagName: 'li',
template: '#template-todoItemView', template: '#template-todoItemView',
Expand Down Expand Up @@ -82,7 +80,6 @@ TodoMVC.module('TodoList.Views', function (Views, App, Backbone, Marionette, $)
// //
// Controls the rendering of the list of items, including the // Controls the rendering of the list of items, including the
// filtering of activs vs completed items for display. // filtering of activs vs completed items for display.

Views.ListView = Backbone.Marionette.CompositeView.extend({ Views.ListView = Backbone.Marionette.CompositeView.extend({
template: '#template-todoListCompositeView', template: '#template-todoListCompositeView',
itemView: Views.ItemView, itemView: Views.ItemView,
Expand Down Expand Up @@ -129,10 +126,8 @@ TodoMVC.module('TodoList.Views', function (Views, App, Backbone, Marionette, $)
// //
// Handler for filtering the list of items by showing and // Handler for filtering the list of items by showing and
// hiding through the use of various CSS classes // 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'; filter = filter || 'all';
$('#todoapp').attr('class', 'filter-' + filter); $('#todoapp').attr('class', 'filter-' + filter);
}); });

}); });
Expand Up @@ -2,12 +2,10 @@
'use strict'; 'use strict';


TodoMVC.module('TodoList', function (TodoList, App, Backbone, Marionette, $, _) { TodoMVC.module('TodoList', function (TodoList, App, Backbone, Marionette, $, _) {

// TodoList Router // TodoList Router
// --------------- // ---------------
// //
// Handle routes to show the active vs complete todo items // Handle routes to show the active vs complete todo items

TodoList.Router = Marionette.AppRouter.extend({ TodoList.Router = Marionette.AppRouter.extend({
appRoutes: { appRoutes: {
'*filter': 'filterItems' '*filter': 'filterItems'
Expand All @@ -19,20 +17,17 @@ TodoMVC.module('TodoList', function (TodoList, App, Backbone, Marionette, $, _)
// //
// Control the workflow and logic that exists at the application // Control the workflow and logic that exists at the application
// level, above the implementation detail of views and models // level, above the implementation detail of views and models

TodoList.Controller = function () { TodoList.Controller = function () {
this.todoList = new App.Todos.TodoList(); this.todoList = new App.Todos.TodoList();
}; };


_.extend(TodoList.Controller.prototype, { _.extend(TodoList.Controller.prototype, {

// Start the app by showing the appropriate views // Start the app by showing the appropriate views
// and fetching the list of todo items, if there are any // and fetching the list of todo items, if there are any
start: function () { start: function () {
this.showHeader(this.todoList); this.showHeader(this.todoList);
this.showFooter(this.todoList); this.showFooter(this.todoList);
this.showTodoList(this.todoList); this.showTodoList(this.todoList);

this.todoList.fetch(); this.todoList.fetch();
}, },


Expand Down Expand Up @@ -68,7 +63,6 @@ TodoMVC.module('TodoList', function (TodoList, App, Backbone, Marionette, $, _)
// Get the TodoList up and running by initializing the mediator // Get the TodoList up and running by initializing the mediator
// when the the application is started, pulling in all of the // when the the application is started, pulling in all of the
// existing Todo items and displaying them. // existing Todo items and displaying them.

TodoList.addInitializer(function () { TodoList.addInitializer(function () {
var controller = new TodoList.Controller(); var controller = new TodoList.Controller();
controller.router = new TodoList.Router({ controller.router = new TodoList.Router({
Expand All @@ -77,5 +71,4 @@ TodoMVC.module('TodoList', function (TodoList, App, Backbone, Marionette, $, _)


controller.start(); controller.start();
}); });

}); });
Expand Up @@ -2,12 +2,9 @@
'use strict'; 'use strict';


TodoMVC.module('Todos', function (Todos, App, Backbone) { TodoMVC.module('Todos', function (Todos, App, Backbone) {

// Todo Model // Todo Model
// ---------- // ----------

Todos.Todo = Backbone.Model.extend({ Todos.Todo = Backbone.Model.extend({

defaults: { defaults: {
title: '', title: '',
completed: false, completed: false,
Expand All @@ -31,7 +28,6 @@ TodoMVC.module('Todos', function (Todos, App, Backbone) {


// Todo Collection // Todo Collection
// --------------- // ---------------

Todos.TodoList = Backbone.Collection.extend({ Todos.TodoList = Backbone.Collection.extend({
model: Todos.Todo, model: Todos.Todo,


Expand All @@ -53,5 +49,4 @@ TodoMVC.module('Todos', function (Todos, App, Backbone) {
return todo.isCompleted(); return todo.isCompleted();
} }
}); });

}); });

0 comments on commit c07b9e2

Please sign in to comment.