Backbone.jsをいじってみたよ

Backbone.jsをいじってみたよ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を取り出して、中身をテンプレートで置き換える。出力は、&lt;li>do something&lt;/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アプリを作りました。

Task

参考

Pocket
LINEで送る

You may also like...