Backbone.js で View を継承する

Backbone.js では View を作るときに Backbone.View を継承しています。
作成した View オブジェクトを更に継承することができます。

サンプルアプリ
http://okanoworld.appspot.com/sample/backbonejs/extend_view/index.html

ソースコード
https://github.com/yokano/sample/tree/master/backbonejs/extend_view


JavaScript

var DrinkView = Backbone.View.extend({
 tagName: 'div',
 className: 'drink',
 render: function() {
  this.$el.append('<div class="filling"></div>');
  return this;
 },
 empty: function() {
  this.$el.find('.filling').remove();
 }
});

var CoffieView = DrinkView.extend({
 className: 'drink coffie'
});

var OrangeJuiceView = DrinkView.extend({
 className: 'drink orange_juice'
});


var drinkView = new DrinkView();
var coffieView = new CoffieView();
var orangeJuiceView = new OrangeJuiceView();

$('body').append(drinkView.render().el);
$('body').append(coffieView.render().el);
$('body').append(orangeJuiceView.render().el);

共通する動作をする複数の View は、まとめておくと綺麗にかけます。