ES6環境でbackbone.jsのView eventsを使う時に気をつけること



javascriptもECMAScript 6の仕様が決まり、
フロントエンド開発でもbabelなどを使ってes6構文で書く機会が多くなってきました。

CoffeeScriptとbackbone.jsを使って書かれていたコードをes6で書き直す機会があったのですが、
Backbone.Viewのeventsプロパティの定義の仕方が今迄と変わっていて少し困惑しました。

下記のコードは全く同じ処理をCoffeeScriptで記述した場合と、
es6で書いたものです。

* CoffeeScriptで記述したケース

# backbone example with coffee-script

# model
class Model extends Backbone.Model

  defaults: () ->
    title: 'this is title'
    val: null

  url: () ->
    '/url'

# view
class View extends Backbone.View

  el: 'body'

  events:
    'click #test': 'test'

  initialize: () ->
    @model = new Model()

  test: () ->
    # model set
    @model.set({val: 'set value'})

    # model get
    console.log @model.get('val')

    console.log @model.attributes()


view = new View()


* es6で記述したケース(babelを使用)

// backbone example with es6 javascript

// model
class Model extends Backbone.Model
{
  // defaults properties
  defaults() {
    return {
        title: 'this is title',
        val: null
      };
  }

  // url method
  url() {
    return '/url';
  }

}

// view
class View extends Backbone.View
{
  constructor () {

    super({
      el: 'body',

      events: {
        'click #test': 'test'
      }

    });

    // modelのインスタンス化
    this.model = new Model();
  }

  // test event
  test () {
    // model set
    this.model.set({val: 'set value'});

    // model get
    console.log(this.model.get('val'));

    // log model properties
    console.log(this.model.attributes);
  }

}

var view = new View();


es6からconstructor()がサポートされたので、
継承をした場合、プロパティの定義はsuper()メソッド内で記述します。

backbone.jsに関して言えば initialize()メソッドを使うと、
二度初期化することになるので、constructor内で一つにまとめられるようになりました。
 

class構文が使えるようになって、だいぶ書きやすくなりましたが
CoffeeScriptを長く使っている人は少し戸惑う場面があるかもしれませんね。

この記事のカテゴリ
プログラミング

この記事のタグ