Backboneシリーズ:todoのデモ

概要
todoの考えは、Modelは各todo項のモデルとして、そして各todo Viewと一つのTodo Viewと関連しています.最後にAppViewでtodo全体の変更をモニターし、対応するイベントをトリガします.
簡単なデモ
ステップ1
まず簡単に機能を追加するだけのtodoから始めます.

var Todo = Backbone.Model.extend({
	//         ，     Collection create      ，       
	defaults: {
		title: 'todo    ',
		done: false
	}
});

var TodoList = Backbone.Collection.extend({
	//       ！
	model: Todo
});
var todolist = new TodoList();

var TodoView = Backbone.View.extend({
	tagName: 'li',
	template: _.template($('#item-template').html()),
	render: function() {
		this.$el.html(this.template(this.model.toJSON()));
		return this;
	}
});

var AppView = Backbone.View.extend({
	el: $('#todoapp'),
	events: {
		'keypress #new-todo': 'create'
	},
	initialize: function () {
		this.input = $('#new-todo');
		// add   API ：'add'(model, collectoin, options)
		//       model       
		this.listenTo(this.collection, 'add', this.addOne);
	},
	create: function(e) {
		if (e.keyCode != 13 || !this.input.val()) {
			return false;
		}
		this.collection.add({
			title: this.input.val(),
			//     create  ，      done  
			done: false
		});
		this.input.val('');
	},
	addOne: function (todo) {
		var view = new TodoView({model: todo});
		//    $el el   ，  append jquery   htmlElement     
		$("#todo-list").append(view.render().el);
	}
});
var app = new AppView({collection: todolist});

は全部で4つのモジュールに分けられています.各todo項に対応するモデル(TodoView)とビュー(Todo View)は、複数のtodo項のセット(TodoList)を一括して保存し、変更を傍受するためのビュー(ApView)を備えています.
データ保存に協力する
BackboneがカスタマイズしたBackbone.syncはモデルまたは集合した状態を可能にします.
持続的にサーバ端に同期します.ここでは、私達は異なる耐久性の方式で、つまりlocal Strageでデータをローカルに保存します.私達が必要なのは、Collectionでlocastrage属性を定義するだけです.

localStorage: new Backbone.LocalStorage("todos-backbone")

その後、私達はcreateとsaveなどの方法を使ってデータを現地に保存し、addイベントをトリガし、モデルの新規と保存を完成することができます.
インタラクティブ機能を豊富にする

モデルとビューの作成:初期化時に保存されたtodo項を自動的にロードし、一方向にTodo項の数とビューを結合し、重要な点はAppViewである.デモ

AppViewビュー初期化時に、セットのfetch()メソッドを呼び出して、格納されたデータをロードする

.

fetch()方法でtodoのモデルデータを取得すると、自動的にセットに追加され、セットの「add」イベントがトリガされ、todo項に対応するビュー

がレンダリングされる.

モデルがセットに追加されると、「all」イベントもトリガされます.ここでtodoエントリ数統計のビュー

を更新することができます.

var AppView = Backbone.View.extend({
	el: $('#todoapp'),
	statsTemplate: _.template($('#stats-template').html()),
	events: {
		'keypress #new-todo': 'create'
	},
	initialize: function () {
		this.input = $('#new-todo');
		// add   API ：'add'(model, collectoin, options)
		//       model       
		this.listenTo(this.collection, 'add', this.addOne);
		this.listenTo(this.collection, 'all', this.render);

		this.footer = this.$('footer');
		this.main = $('#main');

		//           ，    set  
		// set       add  ，  addOne  ，       
		this.collection.fetch();
	},
	render: function () {
		//       ，           todo    
		var done = this.collection.getDone().length;
		var remaining = this.collection.getRemaining().length;

		if (this.collection.length) {
			this.main.show();
			this.footer.show();
			this.footer.html(this.statsTemplate({
				done: done,
				remaining: remaining
			}));
		}
		else {
			this.main.hide();
			this.footer.hide();
		}
	},
	create: function(e) {
		if (e.keyCode != 13 || !this.input.val()) {
			return false;
		}
		this.collection.add({
			title: this.input.val(),
			//     create  ，      done  
			done: false
		});
		this.input.val('');
	},
	addOne: function (todo) {
		var view = new TodoView({model: todo});
		//    $el el   ，  append jquery   htmlElement     
		$("#todo-list").append(view.render().el);
	}
});

モデルとビューの削除:todoプロジェクトのクリアとすべてのクリアを監督し、ビューTodoView上の対応方法を呼び出してDOMを削除します.ポイントはTodoView上のイベントのモニターの定義です.デモ

TodoViewでdestroyボタンのクリックイベントを傍受し、TodoViewにmodestoryイベントを傍受させます.

destoryをクリックしたときにmodelのdestory()を呼び出し、セット内のモデルを削除し、ビューのremove方法を呼び出してDOM

を削除する.

AppViewで削除されたすべてのボタンを傍受し、_.invoke()メソッドは、すべての状態が完了したtodo項

を削除する.

var TodoView = Backbone.View.extend({
	tagName: 'li',
	template: _.template($('#item-template').html()),
	events: {
		'click .toggle': 'toggleDone',
		'click a.destroy': 'clear'
	},
	initialize: function() {
		//  model  destory   ，     remove  ， DOM       
		this.listenTo(this.model, 'destroy', this.remove);
	},
	render: function() {
		this.$el.html(this.template(this.model.toJSON()));
		return this;
	},
	toggleDone: function() {
		//       app   ，   todo       view model
		this.model.toggle();
	},
	clear: function() {
		this.model.destroy();
	}
});

モデルとビューの更新:modelを更新した後、save方法を使ってモデルを更新することができます.デモ

TodoViewでバインドされたダブルクリックイベントは、ダブルクリックした後に変更された内容

を許可する.

は、焦点を失った後にモデルを更新する

.

var Router = Backbone.Router.extend({
    routes: {
        '*filter': 'setFilter'
    },
    setFilter: function(param) {
        state = param || '';
        todolist.trigger('filter');
    }
});
var router = new Router();
Backbone.history.start();

はルート上で傍受し、collectionのfilterイベントをトリガし、viewはcollectionのイベントを傍受し、ビューdemo

を更新する.