Магистральная шина событий и несколько просмотров на одной странице

0

У меня проблема, я пытаюсь использовать простую магистральную шину событий

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("!");
}

Как я уже говорил, когда я нажимаю одну группу кнопок, она запускает событие для каждого отдельного представления (контента), которое у меня есть на странице, есть ли способ заставить это работать надлежащим образом?

Спасибо, парни!

Теги:
events
backbone.js
backbone-events

1 ответ

4
Лучший ответ

Мне несколько вариантов.


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

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
});
  • 0
    Большое спасибо! Расскажите мне больше о контроллере, на самом деле у меня есть какой-то контроллер, который создает все экземпляры (представления, коллекции и т. Д.) На основе загруженного JSON (через getJSON). Это будет очень полезно!
  • 0
    Не зная всех деталей, я добавил предположение о том, как вы можете использовать контроллер для каждого элемента в коллекции.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню