Question

我正在努力更好地构建我在骨干中的事件。目前，我有一个视图通过触发函数内的事件和另一个函数中的事件来与另一个视图进行通信，例如：

//childView
triggerFilterChange: function(e){
  Backbone.trigger('filterChange',activeFilters);
}

//parentView

initialize: function(){
  Backbone.on('filterChange', this.onFilterChange, this);
},

onFilterChange:function(filters){
  //DO STUFF
}

但是，我希望在我的孩子视图中更清楚地说明应该预期哪些事件，而不是仅仅从隐藏在视图中的随机函数中触发某些事物。例如，我在页面顶部清楚地描绘了子视图的所有点击事件：

define([
  'jquery',
  'underscore',
  'backbone',
], function($, _, Backbone){

  var ProductsFiltersView = Backbone.View.extend({

    events : {
          "click .filter-options-container" : "filterOptionContainerClick",
          "click .filter-option" : "filterOptionClick",
    },

所以我的问题是，有没有办法将自定义事件放入此事件对象？或者某些与此类似的结构，因此您可以在视图的顶部知道可能触发哪些事件？像：

events : {
              "click .filter-options-container" : "filterOptionContainerClick",
              "click .filter-option" : "filterOptionClick",
              "filterChange" : "doFilterChange"
        },

doFilterChange: function(){
  Backbone.trigger('parentFilterChange',activeFilters);
}

Answer 1

无论如何，我不会触及事件对象事件对象定义来自el的子元素的事件，这些元素被传播到父元素（el）。

问题更多的是关于如何将不同观点粘合在一起我使用中间自定义对象（我称之为控制器，因为Backbone不提供开箱即用的控制器），用于实例化视图并侦听从视图中触发的事件。

您可以使用指定的事件聚合器在特定的“控制器”对象中使用来处理事件。

MyApp = {};
MyApp.some_vent = _.extend({}, Backbone.Events);

MyApp.some_vent.on("some:event", function(){
  alert("some event was fired!");
});

如果控制器持有对您想要产生某些效果的视图的引用，则可以相应地执行这些视图的方法。

Answer 2

不，这是不可能的。

解析事件哈希，并由Backbone.View.prototype.delegateEvents设置事件处理程序。

delegateEvents使用来自events的选择器和方法名称，在视图的DOM元素上绑定委托的jQuery（或兼容的库，如Zepto）事件侦听器：

if (selector === '') {
  this.$el.on(eventName, method);
} else {
  this.$el.on(eventName, selector, method);
}

因此，您不能使用Backbone.View.prototype.event来侦听非DOM事件（或者实际上是来自视图元素之外的DOM事件），而不会使用您自己的实现覆盖Backbone.View.prototype.delegateEvents。 / p>

顺便说一句，您的示例代码存在缺陷 - 触发filterChange会导致无限循环。

在backbone.js中触发自定义事件

2 个答案: