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>
<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>
architecture-examples/backbone/js/app.js
View file @ 1c739d6f
/*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();
});
architecture-examples/backbone/js/collections/todos.js
View file @ 1c739d6f
......@@ -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();
}());
})();
architecture-examples/backbone/js/models/todo.js
View file @ 1c739d6f
/*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')
});
}
});
}());
})();
architecture-examples/backbone/js/routers/router.js
View file @ 1c739d6f
/*global Backbone*/
/*global Backbone */
var app = app || {};
(function () {
......@@ -6,7 +6,6 @@ var app = app || {};
// Todo Router
// ----------
var Workspace = Backbone.Router.extend({
routes: {
'*filter': 'setFilter'
......@@ -24,5 +23,4 @@ var app = app || {};
app.TodoRouter = new Workspace();
Backbone.history.start();
}());
})();
architecture-examples/backbone/js/views/app.js
View file @ 1c739d6f
/*global Backbone _ $ ENTER_KEY*/
/*global Backbone _ $ ENTER_KEY */
var app = app || {};
$(function ($) {
......
architecture-examples/backbone/js/views/todos.js
View file @ 1c739d6f
/*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 () {
......
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