Permalink
Browse files

Backbone.Marionette - code style

  • Loading branch information...
1 parent 6f25047 commit c07b9e2a7a481ab64933f352f832f44b1e9b6138 @sindresorhus sindresorhus committed Mar 9, 2013
View
36 labs/architecture-examples/backbone_marionette/index.html
@@ -6,6 +6,22 @@
<title>Marionette • TodoMVC</title>
<link rel="stylesheet" href="components/todomvc-common/base.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">
<span id="todo-count"><strong></strong><span></span></span>
<ul id="filters">
@@ -38,22 +54,6 @@
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list"></ul>
</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 -->
<script src="components/todomvc-common/base.js"></script>
<script src="components/jquery/jquery.js"></script>
@@ -68,8 +68,8 @@
<script src="js/TodoMVC.TodoList.Views.js"></script>
<script src="js/TodoMVC.TodoList.js"></script>
<script>
- $(function(){
- // Start the TodoMVC app (defined in js/TodoMVC.js)
+ $(function () {
+ // start the TodoMVC app (defined in js/TodoMVC.js)
TodoMVC.start();
});
</script>
View
14 labs/architecture-examples/backbone_marionette/js/TodoMVC.Layout.js
@@ -2,10 +2,8 @@
'use strict';
TodoMVC.module('Layout', function (Layout, App, Backbone) {
-
// Layout Header View
// ------------------
-
Layout.Header = Backbone.Marionette.ItemView.extend({
template: '#template-header',
@@ -34,7 +32,6 @@ TodoMVC.module('Layout', function (Layout, App, Backbone) {
// Layout Footer View
// ------------------
-
Layout.Footer = Backbone.Marionette.Layout.extend({
template: '#template-footer',
@@ -61,12 +58,12 @@ TodoMVC.module('Layout', function (Layout, App, Backbone) {
},
updateCount: function () {
- var count = this.collection.getActive().length,
- length = this.collection.length,
- completed = length - count;
+ var count = this.collection.getActive().length;
+ var length = this.collection.length;
+ var completed = length - count;
+
this.ui.count.html(count);
this.ui.itemsString.html(' ' + (count === 1 ? 'item' : 'items') + ' left');
-
this.$el.parent().toggle(length > 0);
if (completed > 0) {
@@ -87,10 +84,9 @@ TodoMVC.module('Layout', function (Layout, App, Backbone) {
onClearClick: function () {
var completed = this.collection.getCompleted();
- completed.forEach(function destroy(todo) {
+ completed.forEach(function (todo) {
todo.destroy();
});
}
});
-
});
View
5 labs/architecture-examples/backbone_marionette/js/TodoMVC.TodoList.Views.js
@@ -2,13 +2,11 @@
'use strict';
TodoMVC.module('TodoList.Views', function (Views, App, Backbone, Marionette, $) {
-
// Todo List Item View
// -------------------
//
// Display an individual todo item, and respond to changes
// that are made to the item, including marking completed.
-
Views.ItemView = Marionette.ItemView.extend({
tagName: 'li',
template: '#template-todoItemView',
@@ -82,7 +80,6 @@ TodoMVC.module('TodoList.Views', function (Views, App, Backbone, Marionette, $)
//
// Controls the rendering of the list of items, including the
// filtering of activs vs completed items for display.
-
Views.ListView = Backbone.Marionette.CompositeView.extend({
template: '#template-todoListCompositeView',
itemView: Views.ItemView,
@@ -129,10 +126,8 @@ 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) {
filter = filter || 'all';
$('#todoapp').attr('class', 'filter-' + filter);
});
-
});
View
7 labs/architecture-examples/backbone_marionette/js/TodoMVC.TodoList.js
@@ -2,12 +2,10 @@
'use strict';
TodoMVC.module('TodoList', function (TodoList, App, Backbone, Marionette, $, _) {
-
// TodoList Router
// ---------------
//
// Handle routes to show the active vs complete todo items
-
TodoList.Router = Marionette.AppRouter.extend({
appRoutes: {
'*filter': 'filterItems'
@@ -19,20 +17,17 @@ 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 () {
this.todoList = new App.Todos.TodoList();
};
_.extend(TodoList.Controller.prototype, {
-
// Start the app by showing the appropriate views
// and fetching the list of todo items, if there are any
start: function () {
this.showHeader(this.todoList);
this.showFooter(this.todoList);
this.showTodoList(this.todoList);
-
this.todoList.fetch();
},
@@ -68,7 +63,6 @@ TodoMVC.module('TodoList', function (TodoList, App, Backbone, Marionette, $, _)
// Get the TodoList up and running by initializing the mediator
// when the the application is started, pulling in all of the
// existing Todo items and displaying them.
-
TodoList.addInitializer(function () {
var controller = new TodoList.Controller();
controller.router = new TodoList.Router({
@@ -77,5 +71,4 @@ TodoMVC.module('TodoList', function (TodoList, App, Backbone, Marionette, $, _)
controller.start();
});
-
});
View
5 labs/architecture-examples/backbone_marionette/js/TodoMVC.Todos.js
@@ -2,12 +2,9 @@
'use strict';
TodoMVC.module('Todos', function (Todos, App, Backbone) {
-
// Todo Model
// ----------
-
Todos.Todo = Backbone.Model.extend({
-
defaults: {
title: '',
completed: false,
@@ -31,7 +28,6 @@ TodoMVC.module('Todos', function (Todos, App, Backbone) {
// Todo Collection
// ---------------
-
Todos.TodoList = Backbone.Collection.extend({
model: Todos.Todo,
@@ -53,5 +49,4 @@ TodoMVC.module('Todos', function (Todos, App, Backbone) {
return todo.isCompleted();
}
});
-
});

0 comments on commit c07b9e2

Please sign in to comment.