Question

好的，我有一个像这张照片中的布局：

Layout

屏幕上方的表格由：

制作

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

我很快就会在屏幕的下半部分添加一个新视图（可能是＆＃34; PreviewView＆＃34;）。

我想在＆＃34; PreviewView＆＃34;中发生一些事情。当用户点击一行时。

例如，在PreviewView中显示其他模型的属性（例如细节）会很有趣。

最佳做法是什么？

在每个MessageView中持有对PreviewView的引用？
在select方法中触发事件，并使用预览视图中的 on（）监听它们。
使用瞬态＆＃34;选择＆＃34;我的模型中的属性，并让PreviewView听取集合＆＃34;更改＆＃34;事件？

谢谢，如果您需要更多详细信息请告诉我，我会编辑问题。

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

视图之间的事件处理

1 个答案: