Question

我有一个搜索表单的Backbone视图。表单包含多个元素，包括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>

这是我的Backbone代码：

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

有没有人对如何捕获此类事件有任何想法？

Answer 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 
    }
});

Answer 2

来自jslider页面

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

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

当您实例化jslider时，您可以在选项

中定义这些函数

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

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

2 个答案: