Backbone.js: capture des événements personnalisés sur le plugin jQuery?

Question

J'ai une vue Backbone pour un formulaire de recherche. Le formulaire comprend plusieurs éléments, y compris un curseur implémenté dans jSlider. Je souhaite capturer toutes les modifications apportées au formulaire et mettre à jour les résultats affichés en conséquence.

Je peux capturer les événements de clic bien, mais je ne sais pas comment capturer l'événement de diapositive sur jSlider - Je connais how to bind custom events in Backbone, mais jSlider seems not to have a way to bind it directly.

Voici mon 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> 

Et voici mon code Backbone:

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

Est-ce que quelqu'un a des idées sur la façon de saisir ce genre d'événement?

Answer 1

Vous pouvez passer une fonction onstatechange lors de l'initialisation du curseur 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 
    } 
}); 

Answer 2

de la page jslider

fonction OnStateChange (valeur) feux de fonction tout état de changement de curseur.

fonction de rappel (valeur) feux de fonction de l'événement "mouseup".

lorsque vous instancier jslider, vous définissez les fonctions dans l'option

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