Question

我有两个观点，其中一个有一个搜索框，其中包含一个按钮＆＃34;搜索＆＃34;与id="search"。在第二个视图中我想点击按钮＆＃34;搜索＆＃34;进行搜索。但是对于这种情况，我需要获得身份证明。怎么办呢？

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

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

Answer 1

全局附加click侦听器将起作用，但随着应用程序的增长，应用程序变得难以使用。您最好将每个View视为仅知道自身内发生的事情的页面上的矩形。当两个视图需要交互时，您需要一些方法来协调它们。

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

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就是针对这种事情而构建的。

Answer 2

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

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

});

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

获取Backbone中另一个视图的ID

2 个答案: