Backbone.js查看jquery ui事件

Question

我想从backbone.js视图中侦听jquery-ui排序的事件。当用户停止排序并且DOM位置已更改时，会触发update事件。

这里是我的看法是这样的：

var ProductListView = Backbone.View.extend({ 

    el: '#products', 

    initialize: function(){ 
      _.bindAll(this, 'render','addOne', 'sortChanged'); 

      this.listenTo(app.collection.filteredProducts, 'reset', this.render); 
      this.listenTo(this.$el, 'update', this.sortChanged); 

      this.$el.sortable(); 

    }, 

    render: function(){ 

      this.$el.html(''); 

      this.collection.each(function(product){ 
        this.addOne(product); 
      }, this); 

      return this; 
    }, 

    addOne: function(product){ 
      var view = new ProductItemView({model: product}); 
      this.$el.append(view.render().el); 
    }, 

    sortChanged: function(){ 
      alert('changed'); 
    } 

}); 

我想，既然是同一个元素排序应用于this.$el会发出update事件。但是，在调整列表的种类之后，我没有收到任何提醒，所以看起来事件并未像我预期的那样被解雇。

我看了这篇文章：

Saving jQuery UI Sortable's order to Backbone.js Collection

这种方法似乎工作，但我想明白为什么这个方法没有。

Answer 1

尝试使用观看事件。

var ProductListView = Backbone.View.extend({ 
    el: '#products', 
    events: { 
     sortupdate: 'sortChanged' 
    }, 
    ... 
}); 

根据the jQueryUI documentation，事件名称实际上是“sortupdate”。您可以通过两种方式添加侦听器。

代码示例：

初始化排序与指定更新回调：

$(".selector").sortable({ 
    update: function(event, ui) {} 
}); 

绑定事件监听器sortupdate事件：

$(".selector").on("sortupdate", function(event, ui) {});