获取 Backbone 中另一个视图的 ID

Question

我有两个视图，其中一个有一个搜索框，其中包含一个按钮 "Search" 和 id="search"。在第二个视图中，我希望在单击按钮 "Search" 时进行搜索。但是对于这种情况，我需要获取 id。怎么做到的？

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

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

Answer 1

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

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

});

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

Answer 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* 设计也是如此。您会得到一组很好地解耦的视图，它们对自己一无所知 "outside"，使它们易于维护（和测试！）。

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

获取 Backbone 中另一个视图的 ID

Get id of another view in Backbone

javascript

backbone.js

backbone-views

backbone-routing