$(function(){由 Jérôme Gravel-Niquet 提供範例 Backbone 應用程式。此示範使用簡單的 LocalStorage 介面，在您的瀏覽器中保留 Backbone 模型。
使用 jQuery.ready，在 DOM 準備就緒後載入應用程式
$(function(){我們基本的待辦事項模型具有 title、order 和 done 屬性。
var Todo = Backbone.Model.extend({待辦事項的預設屬性。
defaults: function() {
return {
title: "empty todo...",
order: Todos.nextOrder(),
done: false
};
},切換此待辦事項的 done 狀態。
toggle: function() {
this.save({done: !this.get("done")});
}
});待辦事項集合由 localStorage 支援，而非遠端伺服器。
var TodoList = Backbone.Collection.extend({此集合模型的參考。
model: Todo,在 "todos-backbone" 名稱空間下儲存所有待辦事項。
localStorage: new Backbone.LocalStorage("todos-backbone"),篩選所有已完成待辦事項的清單。
done: function() {
return this.where({done: true});
},篩選清單，僅保留尚未完成的待辦事項。
remaining: function() {
return this.where({done: false});
},我們讓待辦事項保持順序，儘管在資料庫中以無序 GUID 儲存。這會為新項目產生下一個順序號碼。
nextOrder: function() {
if (!this.length) return 1;
return this.last().get('order') + 1;
},待辦事項按其原始插入順序排序。
comparator: 'order'
});建立我們待辦事項的全球集合。
var Todos = new TodoList;待辦事項的 DOM 元素…
var TodoView = Backbone.View.extend({… 是清單標籤。
tagName: "li",快取單一項目的範本函式。
template: _.template($('#item-template').html()),特定於項目的 DOM 事件。
events: {
"click .toggle" : "toggleDone",
"dblclick .view" : "edit",
"click a.destroy" : "clear",
"keypress .edit" : "updateOnEnter",
"blur .edit" : "close"
},TodoView 偵聽其模型的變更，重新呈現。由於在此應用程式中，待辦事項和 TodoView 是一對一的對應，我們在模型上設定直接參考以方便使用。
initialize: function() {
this.listenTo(this.model, 'change', this.render);
this.listenTo(this.model, 'destroy', this.remove);
},重新呈現待辦事項的標題。
render: function() {
this.$el.html(this.template(this.model.toJSON()));
this.$el.toggleClass('done', this.model.get('done'));
this.input = this.$('.edit');
return this;
},切換模型的 "done" 狀態。
toggleDone: function() {
this.model.toggle();
},將此檢視切換至 "editing" 模式，顯示輸入欄位。
edit: function() {
this.$el.addClass("editing");
this.input.focus();
},關閉 "editing" 模式，儲存對待辦事項的變更。
close: function() {
var value = this.input.val();
if (!value) {
this.clear();
} else {
this.model.save({title: value});
this.$el.removeClass("editing");
}
},如果您按 enter，我們會完成編輯項目。
updateOnEnter: function(e) {
if (e.keyCode == 13) this.close();
},移除項目，銷毀模型。
clear: function() {
this.model.destroy();
}
});我們的整體 AppView 是 UI 的頂層部分。
var AppView = Backbone.View.extend({不要產生新的元素，而是繫結到 HTML 中已存在的 App 架構。
el: $("#todoapp"),我們在應用程式底部的統計資料列的範本。
statsTemplate: _.template($('#stats-template').html()),建立新項目和清除已完成項目的委派事件。
events: {
"keypress #new-todo": "createOnEnter",
"click #clear-completed": "clearCompleted",
"click #toggle-all": "toggleAllComplete"
},在初始化時，我們繫結到 Todos 集合上的相關事件，當項目新增或變更時。透過載入可能儲存在 localStorage 中的任何現有待辦事項，啟動所有事項。
initialize: function() {
this.input = this.$("#new-todo");
this.allCheckbox = this.$("#toggle-all")[0];
this.listenTo(Todos, 'add', this.addOne);
this.listenTo(Todos, 'reset', this.addAll);
this.listenTo(Todos, 'all', this.render);
this.footer = this.$('footer');
this.main = $('#main');
Todos.fetch();
},重新呈現應用程式僅表示重新整理統計資料，應用程式的其他部分不會變更。
render: function() {
var done = Todos.done().length;
var remaining = Todos.remaining().length;
if (Todos.length) {
this.main.show();
this.footer.show();
this.footer.html(this.statsTemplate({done: done, remaining: remaining}));
} else {
this.main.hide();
this.footer.hide();
}
this.allCheckbox.checked = !remaining;
},透過為待辦事項建立檢視，並將其元素附加至 <ul>，將單一待辦事項新增至清單中。
addOne: function(todo) {
var view = new TodoView({model: todo});
this.$("#todo-list").append(view.render().el);
},一次加入所有項目到 待辦事項 集合中。
addAll: function() {
Todos.each(this.addOne, this);
},如果您在主輸入欄位按下 Enter，建立新的 待辦事項 模型，並將其儲存在 localStorage 中。
createOnEnter: function(e) {
if (e.keyCode != 13) return;
if (!this.input.val()) return;
Todos.create({title: this.input.val()});
this.input.val('');
},清除所有已完成的待辦事項，並銷毀其模型。
clearCompleted: function() {
_.invoke(Todos.done(), 'destroy');
return false;
},
toggleAllComplete: function () {
var done = this.allCheckbox.checked;
Todos.each(function (todo) { todo.save({'done': done}); });
}
});最後，我們透過建立 應用程式 來啟動所有事情。
var App = new AppView;
});