CODEWITHSUNDEEP
javascriptjqueryjquery-pluginsbackbone.jsbackbone-events
Richard
Richard

Reputation: 65540

Backbone.js: capture custom events on jQuery plugin?

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?

Upvotes: 0

Views: 888

Answers (2)

Lukas
Lukas

Reputation: 9845

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

Upvotes: 2

mikakun
mikakun

Reputation: 2265

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')
     }
   })

Upvotes: 0

Related Questions