Permalink
Browse files

Backbone app - code style

  • Loading branch information...
1 parent 1877dd1 commit 1c739d6fcc4da9ffc83fe11ce08b63076805bc0f @sindresorhus sindresorhus committed Mar 9, 2013
@@ -1,64 +1,64 @@
<!doctype html>
<html lang="en">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <title>Backbone.js • TodoMVC</title>
- <link rel="stylesheet" href="components/todomvc-common/base.css">
-</head>
-<body>
- <section id="todoapp">
- <header id="header">
- <h1>todos</h1>
- <input id="new-todo" placeholder="What needs to be done?" autofocus>
- </header>
- <section id="main">
- <input id="toggle-all" type="checkbox">
- <label for="toggle-all">Mark all as complete</label>
- <ul id="todo-list"></ul>
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <title>Backbone.js • TodoMVC</title>
+ <link rel="stylesheet" href="components/todomvc-common/base.css">
+ </head>
+ <body>
+ <section id="todoapp">
+ <header id="header">
+ <h1>todos</h1>
+ <input id="new-todo" placeholder="What needs to be done?" autofocus>
+ </header>
+ <section id="main">
+ <input id="toggle-all" type="checkbox">
+ <label for="toggle-all">Mark all as complete</label>
+ <ul id="todo-list"></ul>
+ </section>
+ <footer id="footer"></footer>
</section>
- <footer id="footer"></footer>
- </section>
- <div id="info">
- <p>Double-click to edit a todo</p>
- <p>Written by <a href="https://github.com/addyosmani">Addy Osmani</a></p>
- <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
- </div>
- <script type="text/template" id="item-template">
- <div class="view">
- <input class="toggle" type="checkbox" <%= completed ? 'checked' : '' %>>
- <label><%- title %></label>
- <button class="destroy"></button>
+ <div id="info">
+ <p>Double-click to edit a todo</p>
+ <p>Written by <a href="https://github.com/addyosmani">Addy Osmani</a></p>
+ <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</div>
- <input class="edit" value="<%- title %>">
- </script>
- <script type="text/template" id="stats-template">
- <span id="todo-count"><strong><%= remaining %></strong> <%= remaining === 1 ? 'item' : 'items' %> left</span>
- <ul id="filters">
- <li>
- <a class="selected" href="#/">All</a>
- </li>
- <li>
- <a href="#/active">Active</a>
- </li>
- <li>
- <a href="#/completed">Completed</a>
- </li>
- </ul>
- <% if (completed) { %>
- <button id="clear-completed">Clear completed (<%= completed %>)</button>
- <% } %>
- </script>
- <script src="components/todomvc-common/base.js"></script>
- <script src="components/jquery/jquery.js"></script>
- <script src="components/lodash/lodash.js"></script>
- <script src="components/backbone/backbone.js"></script>
- <script src="components/backbone.localStorage/backbone.localStorage.js"></script>
- <script src="js/models/todo.js"></script>
- <script src="js/collections/todos.js"></script>
- <script src="js/views/todos.js"></script>
- <script src="js/views/app.js"></script>
- <script src="js/routers/router.js"></script>
- <script src="js/app.js"></script>
-</body>
+ <script type="text/template" id="item-template">
+ <div class="view">
+ <input class="toggle" type="checkbox" <%= completed ? 'checked' : '' %>>
+ <label><%- title %></label>
+ <button class="destroy"></button>
+ </div>
+ <input class="edit" value="<%- title %>">
+ </script>
+ <script type="text/template" id="stats-template">
+ <span id="todo-count"><strong><%= remaining %></strong> <%= remaining === 1 ? 'item' : 'items' %> left</span>
+ <ul id="filters">
+ <li>
+ <a class="selected" href="#/">All</a>
+ </li>
+ <li>
+ <a href="#/active">Active</a>
+ </li>
+ <li>
+ <a href="#/completed">Completed</a>
+ </li>
+ </ul>
+ <% if (completed) { %>
+ <button id="clear-completed">Clear completed (<%= completed %>)</button>
+ <% } %>
+ </script>
+ <script src="components/todomvc-common/base.js"></script>
+ <script src="components/jquery/jquery.js"></script>
+ <script src="components/lodash/lodash.js"></script>
+ <script src="components/backbone/backbone.js"></script>
+ <script src="components/backbone.localStorage/backbone.localStorage.js"></script>
+ <script src="js/models/todo.js"></script>
+ <script src="js/collections/todos.js"></script>
+ <script src="js/views/todos.js"></script>
+ <script src="js/views/app.js"></script>
+ <script src="js/routers/router.js"></script>
+ <script src="js/app.js"></script>
+ </body>
</html>
@@ -1,12 +1,11 @@
-/*global $*/
-/*jshint unused:false*/
+/*global $ */
+/*jshint unused:false */
var app = app || {};
var ENTER_KEY = 13;
$(function () {
'use strict';
- // Kick things off by creating the **App**.
+ // kick things off by creating the `App`
new app.AppView();
-
});
@@ -10,7 +10,6 @@ var app = app || {};
// The collection of todos is backed by *localStorage* instead of a remote
// server.
var TodoList = Backbone.Collection.extend({
-
// Reference to this collection's model.
model: app.Todo,
@@ -46,5 +45,4 @@ var app = app || {};
// Create our global collection of **Todos**.
app.Todos = new TodoList();
-
-}());
+})();
@@ -1,4 +1,4 @@
-/*global Backbone*/
+/*global Backbone */
var app = app || {};
(function () {
@@ -9,7 +9,6 @@ var app = app || {};
// Our basic **Todo** model has `title`, `order`, and `completed` attributes.
app.Todo = Backbone.Model.extend({
-
// Default attributes for the todo
// and ensure that each todo created has `title` and `completed` keys.
defaults: {
@@ -23,7 +22,5 @@ var app = app || {};
completed: !this.get('completed')
});
}
-
});
-
-}());
+})();
@@ -1,12 +1,11 @@
-/*global Backbone*/
+/*global Backbone */
var app = app || {};
(function () {
'use strict';
// Todo Router
// ----------
-
var Workspace = Backbone.Router.extend({
routes: {
'*filter': 'setFilter'
@@ -24,5 +23,4 @@ var app = app || {};
app.TodoRouter = new Workspace();
Backbone.history.start();
-
-}());
+})();
@@ -1,4 +1,4 @@
-/*global Backbone _ $ ENTER_KEY*/
+/*global Backbone _ $ ENTER_KEY */
var app = app || {};
$(function ($) {
@@ -1,4 +1,4 @@
-/*global Backbone _ $ ENTER_KEY*/
+/*global Backbone _ $ ENTER_KEY */
var app = app || {};
$(function () {
@@ -9,7 +9,6 @@ $(function () {
// The DOM element for a todo item...
app.TodoView = Backbone.View.extend({
-
//... is a list tag.
tagName: 'li',
@@ -18,11 +17,11 @@ $(function () {
// The DOM events specific to an item.
events: {
- 'click .toggle': 'toggleCompleted',
- 'dblclick label': 'edit',
- 'click .destroy': 'clear',
- 'keypress .edit': 'updateOnEnter',
- 'blur .edit': 'close'
+ 'click .toggle': 'toggleCompleted',
+ 'dblclick label': 'edit',
+ 'click .destroy': 'clear',
+ 'keypress .edit': 'updateOnEnter',
+ 'blur .edit': 'close'
},
// The TodoView listens for changes to its model, re-rendering. Since there's
@@ -38,14 +37,13 @@ $(function () {
render: function () {
this.$el.html(this.template(this.model.toJSON()));
this.$el.toggleClass('completed', this.model.get('completed'));
-
this.toggleVisible();
this.$input = this.$('.edit');
return this;
},
toggleVisible: function () {
- this.$el.toggleClass('hidden', this.isHidden());
+ this.$el.toggleClass('hidden', this.isHidden());
},
isHidden: function () {

0 comments on commit 1c739d6

Please sign in to comment.