Skip to content

T
todomvc
Commit 1c739d6f authored by Sindre Sorhus's avatar Sindre Sorhus
Browse files
Options

Backbone app - code style

parent 1877dd10
Hide whitespace changes
Inline Side-by-side
Showing with 75 additions and 85 deletions
architecture-examples/backbone/index.html
View file @ 1c739d6f
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Backbone.js • TodoMVC</title> <title>Backbone.js • TodoMVC</title>
<link rel="stylesheet" href="components/todomvc-common/base.css"> <link rel="stylesheet" href="components/todomvc-common/base.css">
</head> </head>
<body> <body>
<section id="todoapp"> <section id="todoapp">
<header id="header"> <header id="header">
<h1>todos</h1> <h1>todos</h1>
<input id="new-todo" placeholder="What needs to be done?" autofocus> <input id="new-todo" placeholder="What needs to be done?" autofocus>
</header> </header>
<section id="main"> <section id="main">
<input id="toggle-all" type="checkbox"> <input id="toggle-all" type="checkbox">
<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>
</section>
<footer id="footer"></footer>
</section> </section>
<footer id="footer"></footer> <div id="info">
</section> <p>Double-click to edit a todo</p>
<div id="info"> <p>Written by <a href="https://github.com/addyosmani">Addy Osmani</a></p>
<p>Double-click to edit a todo</p> <p>Part of <a href="http://todomvc.com">TodoMVC</a></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> </div>
<input class="edit" value="<%- title %>"> <script type="text/template" id="item-template">
</script> <div class="view">
<script type="text/template" id="stats-template"> <input class="toggle" type="checkbox" <%= completed ? 'checked' : '' %>>
<span id="todo-count"><strong><%= remaining %></strong> <%= remaining === 1 ? 'item' : 'items' %> left</span> <label><%- title %></label>
<ul id="filters"> <button class="destroy"></button>
<li> </div>
<a class="selected" href="#/">All</a> <input class="edit" value="<%- title %>">
</li> </script>
<li> <script type="text/template" id="stats-template">
<a href="#/active">Active</a> <span id="todo-count"><strong><%= remaining %></strong> <%= remaining === 1 ? 'item' : 'items' %> left</span>
</li> <ul id="filters">
<li> <li>
<a href="#/completed">Completed</a> <a class="selected" href="#/">All</a>
</li> </li>
</ul> <li>
<% if (completed) { %> <a href="#/active">Active</a>
<button id="clear-completed">Clear completed (<%= completed %>)</button> </li>
<% } %> <li>
</script> <a href="#/completed">Completed</a>
<script src="components/todomvc-common/base.js"></script> </li>
<script src="components/jquery/jquery.js"></script> </ul>
<script src="components/lodash/lodash.js"></script> <% if (completed) { %>
<script src="components/backbone/backbone.js"></script> <button id="clear-completed">Clear completed (<%= completed %>)</button>
<script src="components/backbone.localStorage/backbone.localStorage.js"></script> <% } %>
<script src="js/models/todo.js"></script> </script>
<script src="js/collections/todos.js"></script> <script src="components/todomvc-common/base.js"></script>
<script src="js/views/todos.js"></script> <script src="components/jquery/jquery.js"></script>
<script src="js/views/app.js"></script> <script src="components/lodash/lodash.js"></script>
<script src="js/routers/router.js"></script> <script src="components/backbone/backbone.js"></script>
<script src="js/app.js"></script> <script src="components/backbone.localStorage/backbone.localStorage.js"></script>
</body> <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> </html>
architecture-examples/backbone/js/app.js
View file @ 1c739d6f
/*global $*/ /*global $ */
/*jshint unused:false*/ /*jshint unused:false */
var app = app || {}; var app = app || {};
var ENTER_KEY = 13; var ENTER_KEY = 13;
$(function () { $(function () {
'use strict'; 'use strict';
// Kick things off by creating the **App**. // kick things off by creating the `App`
new app.AppView(); new app.AppView();
}); });
architecture-examples/backbone/js/collections/todos.js
View file @ 1c739d6f
...@@ -10,7 +10,6 @@ var app = app || {}; ...@@ -10,7 +10,6 @@ var app = app || {};
// The collection of todos is backed by *localStorage* instead of a remote // The collection of todos is backed by *localStorage* instead of a remote
// server. // server.
var TodoList = Backbone.Collection.extend({ var TodoList = Backbone.Collection.extend({
// Reference to this collection's model. // Reference to this collection's model.
model: app.Todo, model: app.Todo,
...@@ -46,5 +45,4 @@ var app = app || {}; ...@@ -46,5 +45,4 @@ var app = app || {};
// Create our global collection of **Todos**. // Create our global collection of **Todos**.
app.Todos = new TodoList(); app.Todos = new TodoList();
})();
}());
architecture-examples/backbone/js/models/todo.js
View file @ 1c739d6f
/*global Backbone*/ /*global Backbone */
var app = app || {}; var app = app || {};
(function () { (function () {
...@@ -9,7 +9,6 @@ var app = app || {}; ...@@ -9,7 +9,6 @@ var app = app || {};
// Our basic **Todo** model has `title`, `order`, and `completed` attributes. // Our basic **Todo** model has `title`, `order`, and `completed` attributes.
app.Todo = Backbone.Model.extend({ app.Todo = Backbone.Model.extend({
// Default attributes for the todo // Default attributes for the todo
// and ensure that each todo created has `title` and `completed` keys. // and ensure that each todo created has `title` and `completed` keys.
defaults: { defaults: {
...@@ -23,7 +22,5 @@ var app = app || {}; ...@@ -23,7 +22,5 @@ var app = app || {};
completed: !this.get('completed') completed: !this.get('completed')
}); });
} }
}); });
})();
}());
architecture-examples/backbone/js/routers/router.js
View file @ 1c739d6f
/*global Backbone*/ /*global Backbone */
var app = app || {}; var app = app || {};
(function () { (function () {
...@@ -6,7 +6,6 @@ var app = app || {}; ...@@ -6,7 +6,6 @@ var app = app || {};
// Todo Router // Todo Router
// ---------- // ----------
var Workspace = Backbone.Router.extend({ var Workspace = Backbone.Router.extend({
routes: { routes: {
'*filter': 'setFilter' '*filter': 'setFilter'
...@@ -24,5 +23,4 @@ var app = app || {}; ...@@ -24,5 +23,4 @@ var app = app || {};
app.TodoRouter = new Workspace(); app.TodoRouter = new Workspace();
Backbone.history.start(); Backbone.history.start();
})();
}());
architecture-examples/backbone/js/views/app.js
View file @ 1c739d6f
/*global Backbone _ $ ENTER_KEY*/ /*global Backbone _ $ ENTER_KEY */
var app = app || {}; var app = app || {};
$(function ($) { $(function ($) {
......
architecture-examples/backbone/js/views/todos.js
View file @ 1c739d6f
/*global Backbone _ $ ENTER_KEY*/ /*global Backbone _ $ ENTER_KEY */
var app = app || {}; var app = app || {};
$(function () { $(function () {
...@@ -9,7 +9,6 @@ $(function () { ...@@ -9,7 +9,6 @@ $(function () {
// The DOM element for a todo item... // The DOM element for a todo item...
app.TodoView = Backbone.View.extend({ app.TodoView = Backbone.View.extend({
//... is a list tag. //... is a list tag.
tagName: 'li', tagName: 'li',
...@@ -18,11 +17,11 @@ $(function () { ...@@ -18,11 +17,11 @@ $(function () {
// The DOM events specific to an item. // The DOM events specific to an item.
events: { events: {
'click .toggle': 'toggleCompleted', 'click .toggle': 'toggleCompleted',
'dblclick label': 'edit', 'dblclick label': 'edit',
'click .destroy': 'clear', 'click .destroy': 'clear',
'keypress .edit': 'updateOnEnter', 'keypress .edit': 'updateOnEnter',
'blur .edit': 'close' 'blur .edit': 'close'
}, },
// The TodoView listens for changes to its model, re-rendering. Since there's // The TodoView listens for changes to its model, re-rendering. Since there's
...@@ -38,14 +37,13 @@ $(function () { ...@@ -38,14 +37,13 @@ $(function () {
render: function () { render: function () {
this.$el.html(this.template(this.model.toJSON())); this.$el.html(this.template(this.model.toJSON()));
this.$el.toggleClass('completed', this.model.get('completed')); this.$el.toggleClass('completed', this.model.get('completed'));
this.toggleVisible(); this.toggleVisible();
this.$input = this.$('.edit'); this.$input = this.$('.edit');
return this; return this;
}, },
toggleVisible: function () { toggleVisible: function () {
this.$el.toggleClass('hidden', this.isHidden()); this.$el.toggleClass('hidden', this.isHidden());
}, },
isHidden: function () { isHidden: function () {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7