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?

Does onstatechange function(value) not suit your needs? – Lukas Jan 10 '13 at 23:11 — Lukas, Jan 10 '13 at 23:11
Yes, I just didn't know how to bind it using `trigger`. – Richard Jan 10 '13 at 23:32 — Richard, Jan 10 '13 at 23:32

Lukas · Accepted Answer · 2013-01-10T23:25:57.847

2

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

edited Jan 10 '13 at 23:25

answered Jan 10 '13 at 23:15

Lukas

9,765
2
37
45

Perfect answer, thank you! I just had to call `this.render()` from inside the view's `initialize` function. – Richard Jan 10 '13 at 23:21
I would kick it up a notch and use the $el context and take advantage of the view (ie, $('#price-jslider',this.$el).slider(); I'd even take it further by doing including the onstatechange in the events itself (ie, events: {'click input, onstatechange #price-jslider': 'updateResults'}) since both events uses the same handler. – Dennis Rongo Jan 11 '13 at 06:01

score 0 · Answer 2 · answered Jan 10 '13 at 23:20

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

Backbone.js: capture custom events on jQuery plugin?

2 Answers2