事件视图之间处理 [英] Event handling between views

问题描述

好吧，我有这样的人在这个图片的布局：

Ok I have a layout like the one in this pic:

在屏幕的上部的表通过由

The table in the upper part of the screen is made by:

的 MessageListView 的

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;
});

的 APPVIEW 的

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

我很快就会在屏幕的下方添加一个新的视图（也许previewView）。

I will soon add a new view (maybe "PreviewView") in the lower part of the screen.

我想使previewView，当用户点击一个行内事情发生。

例如，它可以是有趣的previewView内显示其他模型的属性（详细信息，例如）。

For example, it could be interesting to display other model's attributes (details, e.g.) inside the PreviewView.

什么是最好的做法？

• 抱在一起消息查看里面previewView参考？


• 选择触发方法中的事件，以及使用的倾听他们（）的的preVIEW视图中。


• 使用我的模式中选择了瞬态特性，使previewView听集变事件？

• holding a reference to PreviewView inside each MessageView ?
• triggering events inside select method, and listening to them using on() inside the preview view.
• using a transient "selected" attribute in my model, and make PreviewView listen to collection "change" events?

感谢你，如果你需要更多的细节请告诉我，我将修改的问题。

Thank you, if you need more details tell me please, I'll edit the question.

推荐答案

不知道的最佳实践，但我发现这个解决方案容易实现。我创建了一个全球性的消息对象，公交车，无论

Not sure about the best practice but I found this solution trivial to implement. I created a global messaging object, bus, whatever:

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

您必须注册在pviously创建事件总线的$ P $ previewView的触发的功能（根据你的榜样，这应该是在 previewView ）

You have to register the "triggerable" functions of PreviewView on the previously created event bus (according to your example, this should be in the PreviewView):

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

现在你应该可以通过调用触发任何注册的事件从应用程序中的任何位置： App.vent.trigger 。例如，当一个行的用户点击你将有类似的东西：

Now you should be able to trigger any of registered events from anywhere within your application by calling: App.vent.trigger. For example when the user click on a row you will have something similar:

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

在的情况下，如果你有来发送和触发事件一起使用对象：

in case if you have to send and object along with the triggered event use:

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

这篇关于事件视图之间处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！