Backbone.js: capture custom events on jQuery plugin?

Question

I have a Backbone view for a search form. The form includes several elements, including a slider implemented in jSlider . I want to capture all changes to the form, and update the results shown accordingly.

I can capture the click events fine, but I don't know how to capture the slide event on jSlider - I know how to bind custom events in Backbone , but jSlider seems not to have a way to bind it directly .

Here's my 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>

And here's my Backbone code:

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

Does anyone have any ideas on how to capture this sort of event?

Answer 1

You can pass an onstatechange function when initializing the jQuery slider:

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

from jslider page

onstatechange function(value) Function fires while slider change state.

callback function(value) Function fires on "mouseup" event.

when you instantiate jslider, you define those function in option

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