У меня проблема, я пытаюсь использовать простую магистральную шину событий
var eventBus = _.extend({}, Backbone.Events);
И у меня есть кнопки ниже нескольких просмотров в DOM, а кнопки - это другой вид, например:
===================
===== CONTENT ===== <- VIEW 1 (content)
===================
BTN1 | BTN2 | BTN3 <- VIEW 2 (controls)
И это повторяется несколько раз на странице.
Проблема в том, что когда я запускаю событие, он запускает все виды на странице.
в "контролях" у меня есть:
events: {
'click .check': 'checkMe',
}
checkMe: function(e) {
e.preventDefault();
eventBus.trigger('checkMe');
}
и во всех взглядах:
initialize: function(options) {
…
eventBus.on('checkMe', this.checkMe, this);
},
checkMe: function() {
alert("!");
}
Как я уже говорил, когда я нажимаю одну группу кнопок, она запускает событие для каждого отдельного представления (контента), которое у меня есть на странице, есть ли способ заставить это работать надлежащим образом?
Спасибо, парни!
Мне несколько вариантов.
Вы можете пропустить ваши события. Если у каждого представления есть уникальный идентификатор, вы можете связать события следующим образом:
eventBus.trigger('checkMe:' + uniqueId);
позже поймав его таким образом в представлении
eventBus.on('checkMe:' + this.id, this.checkMe, this);
Или вы можете вызвать событие с уникальным идентификатором в качестве параметра
eventBus.trigger('checkMe', {id: uniqueId});
обрабатывая событие следующим образом:
checkMe: function(params) {
if(params.id === this.id) {
alert("!");
}
}
Третьим вариантом может быть создание объекта контроллера для посредничества между каждым набором контента и элементами управления. Контроллеры будут служить шинами событий, каждый из которых будет обрабатывать события контроллеров дискретно, предотвращая проблему глобального события.
---------------------------------------------
| =================== |
| ===== CONTENT ===== <- VIEW 1 (content) | <- Controller Instance
| =================== |
| BTN1 | BTN2 | BTN3 <- VIEW 2 (controls) |
---------------------------------------------
Скажем, у вас есть коллекция, которую вы перебираете для создания наборов контента/управления. Это будет выглядеть примерно так (в очень грубой форме). Контроллер здесь - это просто шина событий, но при необходимости может содержать больше логики.
collection.each(function(item) {
var controller = _.extend({}, Backbone.Events);
controller.onCheckMe = function () {
contentView.performWork();
};
var contentView = new ContentView({
performWork: function () {
// TODO: do work here
}
});
var controlsView = new ControlsView({
events: {
'click .check': 'checkMe',
},
checkMe: function(e) {
e.preventDefault();
this.trigger('checkMe');
}
);
controller.listenTo(controlsView, 'checkme', controller.onCheckMe.bind(controller));
// TODO: render the views here
});