Обработка событий между представлениями

Хорошо, у меня есть макет, как на этом рисунке:

Макет

Таблицу в верхней части экрана составляют:

Просмотр списка сообщений

define(['backbone','collections/messages','views/message'], function(Backbone, MessageCollection, MessageView) {
    var MessageListView = Backbone.View.extend({
        el: '#messagesContainer', 
        initialize: function() {

            this.collection = new MessageCollection();
            this.collection.fetch({reset:true});
            this.listenTo( this.collection, 'reset', this.render );

            this.table = this.$el.find("table tbody");
            this.render();
        },
        render: function() {
            this.collection.each( function(message, index) {                
                this.renderMessage(message, index);
            }, this);
        },
        renderMessage: function(message, index) {
            var view = new MessageView({
                model:message,
                className: (index % 2 == 0) ? "even" : "odd"    
            });
            this.table.append( view.render().el );
        }
    });
    return MessageListView;
});

Просмотр сообщения

define(['backbone','models/message'], function(Backbone, MessageCollection, MessageView) {
    var MessageView = Backbone.View.extend({
        template: _.template( $("#messageTemplate").html() ), 
        render: function() {
            this.setElement( this.template(this.model.toJSON()) );          
            return this;
        },
        events:{
            'click':'select'
        },
        select: function() {
           // WHAT TO DO HERE?
        }
    });
    return MessageView;
});

Просмотр приложения

define(['backbone','views/messages'], function(Backbone, MessageList) {
    var App = Backbone.View.extend({
        initialize: function() {
            new MessageList(); 
        }
    });
    return App;
});

Скоро добавлю новый вид (может быть "PreviewView") в нижней части экрана.

Я хочу, чтобы что-то происходило внутри "PreviewView", когда пользователь щелкает строку.

Например, может быть интересно отображать другие атрибуты модели (детали, например) внутри PreviewView.

Какова наилучшая практика?

  • удерживая ссылку на PreviewView внутри каждого MessageView?
  • запуск событий внутри метода select и прослушивание их с помощью on() в режиме предварительного просмотра.
  • используя временный атрибут «выбранный» в моей модели и заставить PreviewView прослушивать события «изменения» коллекции?

Спасибо, если вам нужна дополнительная информация, скажите мне, пожалуйста, я отредактирую вопрос.


person Fabio B.    schedule 11.07.2013    source источник


Ответы (1)


Не уверен в лучшей практике, но я нашел это решение тривиальным для реализации. Я создал глобальный объект обмена сообщениями, автобус, что угодно:

window.App = {};
window.App.vent = _.extend({}, Backbone.Events);

Вы должны зарегистрировать «триггерные» функции PreviewView на ранее созданной шине событий (согласно вашему примеру, это должно быть в PreviewView):

initialize: function () {
    App.vent.on('PreviewView.show', this.show, this);
}

Теперь вы сможете инициировать любое из зарегистрированных событий из любого места вашего приложения, вызвав: App.vent.trigger. Например, когда пользователь нажимает на строку, у вас будет что-то похожее:

App.vent.trigger('PreviewView.show');

в случае, если вам нужно отправить и возразить вместе с использованием инициированного события:

App.vent.trigger('PreviewView.show', data);
person Akos K    schedule 11.07.2013
comment
хорошо, но как насчет передачи выбранной модели. Как PreviewView может узнать, какая модель в коллекции выбрана? Может быть, я могу передать на шину событий саму модель? - person Fabio B.; 11.07.2013
comment
конечно, триггер также принимает аргумент: App.vent.trigger('PreviewView.show', model); - person Akos K; 11.07.2013
comment
по вашему мнению, лучше ли держать представление приложения (верхний уровень) в неведении о том, что делает базовое представление, и использовать агрегатор событий, как вы предложили, чтобы все представления были развязаны.... ИЛИ иметь коллекции и все, что находится в Просмотр приложения? - person Fabio B.; 28.07.2013
comment
Я всегда использую развязанные представления, но это действительно зависит от вас, и у связи, и у развязки есть свои плюсы и минусы. В случае несвязанных представлений вы получаете удобочитаемость, но в случае общей ошибки, возможно, вам придется исправлять одну и ту же ошибку в каждом представлении. Лучше всего попробовать оба решения и придерживаться того, который вам нравится больше всего. - person Akos K; 31.07.2013