最近、angularが熱くて、twitter見てると、angular周りが活発に流れて来るのだが、

angularのウリにしてるデータバインディング、Backboneでも同じ様な事がpluginで出来る。

Backbone自体は、非常にミニマルに出来ているので、(おそらく今後も本体にこういう機能入らなそう...)

こういう機能は自分で追加しないといけないのだが、pluginさえ入れれば動く。

幾つか類似pluginあるようだが、ここでは、stickitの事を書く。

stickitについて

NYTimes社のもの。

使い方

使い方は非常にsimpleでViewの中に

これだけ。

公式ページのsampleを実際にやってみる。

Viewの中で、bindingsを準備する。その中に、

html要素のセレクタ : 紐づけたいthis.model内の属性名をobject形式で記述する。

  bindings: {
    '#title': 'title',
    '#author': 'authorName'
  }

この例だと、1行目は、<input type="text" id="title"/>みたいなhtml要素に対して

View内のthis.modelのtitleプロパティと紐づけようとしている。

この後、render()等、上記bindingsで指定したhtml要素が存在しているタイミングで、

this.stickit()と書くだけ。

例。

  render: function() {
    this.$el.html('<div id="title"/> <input id="author" type="text">');
    this.stickit();
  }

これだけ。

めっちゃ簡単。

上記angularのページで説明しているような two way bindingが、

stick itでも上記の記述だけでデフォルトで出来る。

また、bindingsの中に、色々な細かい設定を書く事が出来て、

そこで、updateModel/updateViewをfalseとか書くと、 one way bindingも出来る。

他、同期のタイミングでのデータ加工等、色々な設定が出来る。

Backbone書いてると、同じ様な#title要素から@model.title詰めて、

@model.titleの内容を#title要素に書いて、みたいな処理を何度も書く事になるので、

これがあると、めっちゃ記述量が減る。

あんど、marionetteと一緒に使うと、ソース記述量がかなり減る。

やばい。

気持ち良い。

困ったときは、それぞれのソースを読めばどうにかなってしまうので、

あくまで自分の目の届く範囲で収まっているという所が良いですね。Backbone。