Backbone.jsでjQueryのSortableを使用する際の小ネタ

ViewでのSortableイベントの管理

Backbone.jsで、jQueryのSortableを使おうとした際にちょっと困ったことがあったのでメモ。

とあるTableにSortableを仕込もうと思って、Tableの初期化の際に

view.js

var Table = Backbone.View.extend({
  className: "ui-sortable",
  initialize: function(){
    this.$el.sortable({
       start: function(e, ui){
         this.idx = ui.item.index();
       },
       update: function(e, ui){
         alert(this.idx);
       }
    });
  }
});

みたいな感じでinitialize内で設定していたが、この場合だと、thisがTableクラスを参照してくれないので、this.idxがエラーになってしまう。もしかしたらbindとかで上手く解決する事ができるかもしれないけど、自分はこれで解決した。

view.js

var Table = Backbone.View.extend({
  initialize: function(){
    this.$el.sortable({});  
  },
  className: "ui-sortable",
  events: {
    "sortstart": "start",
    "sortupdate": "update"
  },
  start: function(e, ui){
    this.idx = ui.item.index();
  },
  update: function(e, ui){
    alert(this.idx);
  }
});

って感じです。