backbone.stickit の select がうまくバインドされないとき

backbone.stickit で、<select>に数値型の値をバインドさせようとすると、単純にはうまくいきません。

具体的には、テンプレートが

<select id="category">
  <option value="1">カテゴリ1</option>
  <option value="2">カテゴリ2</option>
</select>

で、JavaScript が

var Model = Backbone.Model.extend({
  defaults: {
    categoryId: 2
  }
});

var View = Backbone.View.extend({
  el: document,

  bindings: {
    '#category': 'categoryId'
  },

  render: function() {
    this.stickit();
    return this;
  }
});

$(function() {
  var model = new Model();
  var view = new View({ model: model });
  view.render();
});

のようなとき、カテゴリ2 が選択されません。
categoryId が、文字列の "2" ならばバインドされますが、属性の型は変えたくない場合が多いと思います。

対処

<option> に data-stickit-bind-val 属性を追加することで解決します。

<select id="category">
  <option value="1" data-stickit-bind-val="1">カテゴリ1</option>
  <option value="2" data-stickit-bind-val="2">カテゴリ2</option>
</select>

value の値と同じですが、data-stickit-bind-val は型変換されるので、数値を書いておくと数値型としてバインドされるようになります。