Backbone.jsの練習をしてみました。今回もドットインストール！
Backbone.jsとは
- JavaScriptのアプリケーションフレームワーク
- Backbone.js
Modelを作る
// Model
var Task = Backbone.Model.extend({ defaults: { title: “do something!”, completed: false }, validate: function(attrs) { if ( _.isEmpty(attrs.title)) { return “title must not be empty.” } }, toggle: function() { this.set(‘completed’, !this.get(‘completed’)); } });
var task1 = new Task({ completed: true });
// セットとゲットのチェック task1.set(‘title’, ‘newTitle’); var title = task1.get(‘title’); console.log(title);
// トグルメソッドのチェック console.log(task1.toJSON()); task1.toggle(); console.log(task1.toJSON());
// バリデーションのチェック task1.set({title: ”}, {validate: true}); console.log(task1.toJSON());
defaultsで初期値をセット-
validateでバリデーションを追加- バリデーションを利用する際には、{validate: true}をset時に行う
set('[プロパティ名]', '[値]')で値をセットget('[プロパティ名]')で値をゲット
Viewを作る
// View
var TaskView = Backbone.View.extend({ tagName: ‘li’ });
var taskView = new TaskView({ model: task}); console.log(taskView.el);
基本はこれ、taskView.elを出力すると、<li></li>となる。taskView.$elを出力すると、jQueryのオブジェクトになる。
// View
var TaskView = Backbone.View.extend({ tagName: ‘li’, // className: ‘liClass’, // id: ‘liId’ template: _.template(”<%- title %>”), render: function() { var template = this.template( this.model.toJSON()); this.$el.html(template); return this; } });
var taskView = new TaskView({ model: task}); console.log(taskView.render().el);
})();
- templateを使って、自身の持っているmodelを当てはめてビューで表示する。そして、jQueryのオブジェクトとしてelementを取り出して、中身をテンプレートで置き換える。出力は、
<li>do something</li>となる。 - classNameを使うとclassを、idを使うとidをそれぞれ追加することができる。例:
<className="liClass", id="liId"> - テンプレートは切り出しておくと良い: #08 外部templateを使おう
Eventを使う
// View
var TaskView = Backbone.View.extend({ tagName: ‘li’, template: _.template($(‘#task-template’).html()), render: function() { var template = this.template( this.model.toJSON()); this.$el.html(template); return this; } });
eventsで指定することにより、イベントを登録することができる。更に、click .commandとセレクタを追加することもできる。
Collectionを使う
// Collection
var Tasks = Backbone.Collection.extend({ model: Task })
var tasks = new Tasks([ { title: ‘task1’, completed: true }, { title: ‘task2’ }, { title: ‘task3’ } ]);
console.log(tasks.toJSON());
コレクションを使って、CollectionViewを作っていきます。
// Collection
var Tasks = Backbone.Collection.extend({ model: Task })
var TasksView = Backbone.View.extend({ tagName: ‘ul’, render: function() { this.collection.each(function(task) { var taskView = new TaskView({model: task}); this.$el.append(taskView.render().el); }, this); return this; } });
var tasks = new Tasks([ { title: ‘task1’, completed: true }, { title: ‘task2’ }, { title: ‘task3’ } ]);
var tasksView = new TasksView({collection: tasks}); $(‘#tasks’).html(tasksView.render().el);
レッスンはこの後、こんなTODOアプリを作りました。
