Backbone.js: イベントハンドラを指定する

Backbone.js においてイベントハンドラは events プロパティで指定する。イベントの観測対象となる要素のセレクターは el プロパティもしくはイベントのあとに記述する。

<div id="result">
  <button id="mybutton">クリックしてください</button>
</div>

<script type="text/javascript">
var AppView = Backbone.View.extend({

  el: "#result",

  events: {
    "click #mybutton": "clicked"
  },

  clicked: function() {
    console.log("クリックされました");
  },

});

var App = new AppView;
</script>

Backbone.js: モデルとビューの連携について

Q&A によるとモデルとビューのあいだの参照方法は複数存在する。直接のポインターを使い、ビューとモデルが一対一で対応させる(model.view と view.model)。ビューの生成と組織化を調整する中間的な「コントローラー」オブジェクトを用意する方法もある。イベントによるアプローチを好む人もおり、メソッドを直接呼び出す代わりに常にイベントを発動させる。

Backbone.js: モデルのデフォルトを指定する

defaults プロパティを使って、プロパティのデフォルトを指定することができる。デフォルトの値はインスタンス生成の際に指定されなかったプロパティに対して使われる。

var Meal = Backbone.Model.extend({
  defaults: {
    "main": "焼き肉定食",
    "dessert": "アイスクリーム"
  }
});

var order = new Meal;
var order2 = new Meal({'main': 'カレーライス'});

// 焼き肉定食
console.log(order.get('main'));
// カレーライス
console.log(order2.get('main'));

Backbone.js: テンプレートを使う

Underscore.js に template メソッドが用意されているので、さっそく使ってみよう。ビューに template メソッドを用意しておけば、テンプレートを別のものに切り替えたときに、修正する箇所を減らすことができる。

var AppView = Backbone.View.extend({

  el: '#result',

  initialize: function() {
    this.render();
  },

  template: _.template("Hello <%= name %>"),

  render: function(){
    this.$el.html(this.template({ name:'masaki' }));
    return this;
  }
});
 
var App = new AppView;

Backbone.js: Hello World

Backbone.js で Hello World を行う。最小限必要なことは Backbone.View　の extend メソッドを使って initialize メソッドと render メソッドを定義することおよび、ビューのインスタンスを生成することである。

initialize メソッドはビューのインスタンスを生成する際に実行されるメソッドである。今回は render メソッドの実行を指定した。el プロパティはビューのなかにおける DOM 要素(element)の表現である。$el は jQuery によって処理済みの DOM 要素である。jQuery が使えるので、el にはセレクターを指定することができる。

<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>

<div id="result">
</div>

<script type="text/javascript">
var AppView = Backbone.View.extend({

  el: '#result',

  initialize: function() {
    this.render();
  },

  render: function(){
    this.$el.html('hello World');
  }
});
 
var App = new AppView;
</script>