获取 Backbone 中另一个视图的 id答案

【问题标题】：Get id of another view in Backbone获取 Backbone 中另一个视图的 id
【发布时间】：2015-04-09 02:31:37
【问题描述】：

我有两个视图，其中一个有一个搜索框，其中包含一个带有id="search" 的“搜索”按钮。在我想要的第二个视图中，单击“搜索”按钮进行搜索。但是对于这种情况，我需要获取 id。怎么会这样？

这是我第二个视图的代码，但由于#search 在第一个视图中，所以不起作用：

ev.views.Home = Backbone.View.extend({
events: {
        'click #search' : 'searchKey',
});

【问题讨论】：

标签： javascript backbone.js backbone-views backbone-routing

【解决方案1】：

所有事件哈希仅限于视图el。因此不会触发事件。全局访问元素并在视图的初始化中使用 jquery 绑定事件。

     ev.views.Home = Backbone.View.extend({
       initialize:function(){
       $('#search').click(this.searchKey);
      }

});

编辑：这个答案只是解决了问题。考虑 Peter Wagener 的答案。

【讨论】：

【解决方案2】：

全局附加一个click 监听器会起作用，但随着应用程序的增长，它会变得难以使用。您最好将每个View 视为页面上的一个矩形，仅知道其内部发生的事情。当两个视图需要交互时，您需要某种方式在它们之间进行协调。

一个简单的建议是使用模型作为两个视图之间的事件总线：

var ViewWithSearch = Backbone.View.extend({
    events: {
        'click .search' : 'searchKey'
    },

    initialize: function(options) {
        this.eventModel = options.eventModel;
    },

    searchKey: function(event) {
        this.eventModel.trigger('search', event)
    }
});

var ReactingView = Backbone.View.extend({
    initialize: function(options) {
        this.listenTo(options.eventModel, 'search', this.onSearch);
    },

    onSearch: function(eventModel, event) {
        console.log("Search was clicked!");
    }
});

var eventModel = new Backbone.Model();

new ViewWithSearch({
    eventModel: eventModel
}).render();

new ReactingView({
    eventModel: eventModel
}).render();

这肯定比全局事件更复杂，但对于MV* 设计也是如此。你会得到一组很好解耦的视图，它们不知道任何“外部”的东西，使它们易于维护（和测试！）。

有很多库可以提供这种功能；例如，Backbone.Radio 就是为这类事情而构建的。

【讨论】：

如果您只需要一个没有任何存储的全局事件系统，您也可以eventBus = _.extend({ }, Backbone.Events)。
对该评论+1！这实际上是我在一些生产应用程序中所做的；只是不想扩大答案不得不解释Backbone.Events。
您还可以查找 Marionette，这是 Backbone 的轻量级 MVC 扩展，它添加了一个控制器来保存这些类型的事件处理程序，让您的模型和视图更加专注于它们应该做的事情。