レガシーなBackbone.jsのコードをES6で書く

レガシーなコード

var DocumentRow = Backbone.View.extend({

  tagName: "li",

  className: "document-row",

  events: {
    "click .icon":          "open",
    "click .button.edit":   "openEditDialog",
    "click .button.delete": "destroy"
  },

  initialize: function() {
    this.listenTo(this.model, "change", this.render);
  },

  render: function() {
    ...
  }

});

こういうレガシーコードはインテリセンスがまっっっったく働かないので、クラス式に書き換える。

const DocumentRow = class extends Backbone.View {

  events() {
    return{
        "click .icon":          "open",
        "click .button.edit":   "openEditDialog",
        "click .button.delete": "destroy"
    }
  },

  initialize() {
    this.tagName = "li";
    this.className = "document-row";
    this.listenTo(this.model, "change", this.render);
  },

  render() {
    ...
  }

};

あとは() {の部分を:function() {に置換するなどすればOK。backbone.jsが独自の初期化システムを持っているため、コンストラクタは定義しないほうがいいっぽい。

コーディング時はインテリセンスの恩恵を受けるためにES6で書き、レビューで書き直せと言われたら戻すのが良さそう。

この世からプロトタイプベースのJSが滅びますように。