0

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

我可以很好地捕获点击事件，但我不知道如何在 jSlider 上捕获幻灯片事件 - 我知道如何在 Backbone 中绑定自定义事件，但 jSlider似乎没有办法直接绑定它。

这是我的 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 
    }
   });

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

4

2 回答 2

2

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

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 
    }
});
于 2013-01-10T23:15:14.983 回答
0

来自 jslider 页面

onstatechange function(value) 当滑块改变状态时函数触发。

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

当您实例化 jslider 时，您在选项中定义这些函数

$(whatever).jslider({
       onstatechange : function(v) {
                 //set your input value to v
                 $('#searchForm').trigger('click')
     }
   })
于 2013-01-10T23:20:08.663 回答