Почему мой ползунок диапазона jQuery UI не отвечает на события pubsub? - PullRequest
0 голосов
/ 26 февраля 2012

Я создаю калькулятор на основе ползунка диапазона пользовательского интерфейса jQuery, и у меня есть работающая настройка. В моем приложении есть функция bindEvents, которая связывает ползунок с событием slide:

    // this is where I bind all slide events
    bindEvents: function() {
        // hold on to the value of this
        var self = CloudCalc;

        // bind the slider's slide event to a data event
        self.sl.on('slide', this.setSliderOutputValue);             
    }

и вот обработчик, который верно выполняет мое событие:

setSliderOutputValue: function (event, ui) {
        // hold on to the value of this
        var self = CloudCalc;

        // show the ui output value on slide event
        self.output.html( ui.value + " INSTANCE");  
}

Теперь я хочу вызвать несколько событий, когда пользователь перемещает слайдер. Поэтому я хотел бы использовать шаблон наблюдателя в этой настройке следующим образом (используя плагин addyosmani pubsub):

bindEvents: function() {
    // hold on to the value of this
    var self = CloudCalc;

    // bind the slider's slide event and publish it
    self.sl.on('slide', $.publish('slider/moved'));             
}

Вот подписка:

subscriptions: function () {
    $.subscribe('slider/moved', this.setSliderOutputValue);     
}

Поэтому, когда эта подписка вызывает событие setSliderOutputValue, я получаю сообщение об ошибке консоли:

Uncaught TypeError: Cannot read property 'value' of undefined

Это означает, что ссылка на свойство пользовательского интерфейса не передается событию setSliderOutputValue.

Как передать свойство пользовательского интерфейса? Пожалуйста, поправьте меня, если я делаю это неправильно.

1 Ответ

0 голосов
/ 26 февраля 2012

Итак, вот что я получил, работая с шаблоном pubsub. Я добавил вызов $.publish к методу setSliderOutputValue следующим образом:

setSliderOutputValue: function (event, ui) {
        // hold on to the value of this
        var self = CloudCalc;

        // show the ui output value on slide event
        self.output.html( ui.value + " INSTANCE");
        $.publish('slider/moved')   
},

А потом добавили в мою подписку вот так:

subscriptions: function () {
        $.subscribe( 'plan/results', this.parseJSON );      
        $.subscribe( 'slider/moved', this.setVMval );
        $.subscribe( 'slider/moved', this.setRAMval );
        $.subscribe( 'slider/moved', this.setHDval );           
},

И вуаля! Теперь я могу слушать и запускать несколько событий на основе одного события с помощью моего ползунка диапазона jQuery.

Приветствуются любые предложения по улучшению этого кода путем рефакторинга нескольких звонков по подписке в один звонок.

...