Backbone.js：在 jQuery 插件上捕获自定义事件？答案

【问题标题】：Backbone.js: capture custom events on jQuery plugin?Backbone.js：在 jQuery 插件上捕获自定义事件？
【发布时间】：2013-01-10 23:04:26
【问题描述】：

我有一个搜索表单的主干视图。该表单包含几个元素，包括在jSlider 中实现的滑块。我想捕获对表单的所有更改，并相应地更新显示的结果。

我可以很好地捕捉点击事件，但我不知道如何捕捉 jSlider 上的滑动事件 - 我知道 how to bind custom events in Backbone，但 jSlider seems not to have a way to bind it directly。

这是我的 HTML：

   <form id="searchform">
   <input type="text" id="city" />
   <input type="text" id="type" />
   <input id="price-jslider" type="slider" name="price" value="1;500" />
   </form>

这是我的主干代码：

var SearchFormView = Backbone.View.extend({
    el: $('#searchForm'),
    events: {
      "click input": "updateResults",
      // how to capture slide event on jslider?
    },
    updateResults: function(e) {
      // do stuff 
    }
   });

有人对如何捕捉此类事件有任何想法吗？

【问题讨论】：

onstatechange 函数（值）不适合您的需求吗？
是的，我只是不知道如何使用trigger绑定它。

标签： javascript jquery jquery-plugins backbone.js backbone-events

【解决方案1】：

您可以在初始化 jQuery 滑块时传递一个onstatechange 函数：

var SearchFormView = Backbone.View.extend({
    el: $('#searchForm'),
    render: function() {
        var self = this;
        $("#price-jslider").slider({
            onstatechange: function( value ) {
                self.updateResults();
            }
        });
    },
    events: {
      "click input": "updateResults"
    },
    updateResults: function(e) {
      // do stuff 
    }
});

【讨论】：

完美答案，谢谢！我只需要从视图的initialize 函数内部调用this.render()。
我会提高一个档次并使用 $el 上下文并利用视图（即 $('#price-jslider',this.$el).slider(); 我'甚至会通过在事件本身中包含 onstatechange 来更进一步（即事件：{'click input, onstatechange #price-jslider': 'updateResults'}），因为这两个事件使用相同的处理程序。

【解决方案2】：

来自 jslider 页面

onstatechange 函数（值）滑块更改状态时触发函数。

回调函数（值）函数在“mouseup”事件时触发。

当你实例化 jslider 时，你在 option 中定义那些函数

$(whatever).jslider({
       onstatechange : function(v) {
                 //set your input value to v
                 $('#searchForm').trigger('click')
     }
   })

【讨论】：