Backbone.js: захватывать пользовательские события в плагине jQuery?

У меня есть представление Backbone для формы поиска. Форма включает в себя несколько элементов, в том числе слайдер, реализованный в 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>

А вот мой код Backbone:

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

У кого-нибудь есть идеи, как запечатлеть такое событие?


javascript jquery backbone.js jquery-plugins backbone-events
person Richard    schedule 10.01.2013    source источник
comment
Функция onstatechange (значение) не соответствует вашим потребностям?   -  person Lukas    schedule 11.01.2013
comment
Да я просто не знал как его привязать с помощью trigger.   -  person Richard    schedule 11.01.2013

Ответы (2)


arrow_upward
2
arrow_downward

Вы можете передать функцию 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 
    }
});
person Lukas    schedule 10.01.2013
comment
Идеальный ответ, спасибо! Мне просто нужно было вызвать this.render() из функции initialize представления. - person Richard; 11.01.2013
comment
Я бы поднял его на ступеньку выше и использовал контекст $el и воспользовался представлением (т. е. $('#price-jslider',this.$el).slider(); я бы даже пошел дальше, выполнив включая onstatechange в самих событиях (т. е. события: {'click input, onstatechange #price-jslider': 'updateResults'}), поскольку оба события используют один и тот же обработчик. - person Dennis Rongo; 11.01.2013

arrow_upward
0
arrow_downward

со страницы jslider

onstatechange function(value) Функция срабатывает при изменении состояния ползунка.

функция обратного вызова (значение) Функция срабатывает при событии «mouseup».

когда вы создаете экземпляр jslider, вы определяете эту функцию в опции

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