javascript - 获取 Backbone 中另一个 View 的 id

Question

我有两个 View ，其中一个有一个搜索框，其中包含一个带有 id="search" 的“搜索”按钮。在第二个 View 中，我想在单击“搜索”按钮时进行搜索。但为了发生这种情况，我需要获取 id。怎么才能做到这一点？

这是我的第二个 View 的代码，但不起作用，因为 #search 位于第一个 View 中:

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

Answer 1

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

一个简单的建议是使用模型作为两个 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* 设计。您将获得一组很好解耦的 View ，这些 View 不了解自身“外部”的任何内容，从而使它们易于维护(和测试!)。

有很多库提供此类功能；例如，Backbone.Radio正是为此类事情而构建的。