Question

我在视图中有这段代码：

array[index] = value

注意：初始化时会调用set_events。好吧，我不喜欢在两个不同的地方定义事件，但是因为文档说从'events'prop定义的事件绑定到元素（或者如果传递选择器的子节点），我想我不能使用它适用于其他类型的活动。我对么？

我还试图从我的set_events函数中定义'events'，但由于某种原因导致内存泄漏或类似的东西（浏览器卡住）。

另一个更普遍的问题可能是：在Backbone视图中，有没有办法在一个地方定义所有事件？

Answer 1

在View中，您可以监听两种类型的事件：DOM事件和使用Event API触发的事件。了解视图如何绑定到这些事件以及调用其回调的上下文之间的差异非常重要。   OM事件可以绑定到使用View的events属性或使用jQuery.on（）。在使用events属性绑定的回调中，这引用了View对象;而任何直接使用jQuery绑定的回调都会将此设置为jQuery处理DOM元素。所有DOM事件回调都由jQuery传递给一个事件对象。有关其他详细信息，请参阅Backbone文档中的delegateEvents（）。

事件API事件的绑定如本节所述。如果使用观察对象上的on（）绑定事件，则可以将上下文参数作为第三个参数传递。如果使用listenTo（）绑定事件，则在回调中这将引用侦听器。传递给Event API回调的参数取决于事件的类型。有关详细信息，请参阅Backbone文档中的事件目录。

是的，你可以在view initialize方法中定义所有事件，参见下面的例子

// Add your javascript here
var View = Backbone.View.extend({

  el: '#todo',
  // bind to DOM event using events property
  initialize: function() {
    // bind to DOM event using jQuery
    this.events = {
      'click [type="checkbox"]': 'clicked'
    };
    this.$el.click(this.jqueryClicked);
    // bind to API event
    this.on('apiEvent', this.callback);
  },

  // 'this' is view
  clicked: function(event) {
    console.log("events handler for " + this.el.outerHTML);
    this.trigger('apiEvent', event.type);
  },

  // 'this' is handling DOM element
  jqueryClicked: function(event) {
    console.log("jQuery handler for " + this.outerHTML);
  },

  callback: function(eventType) {
    console.log("event type was " + eventType);
  }

});

您可以看到演示here

代码

set_events:function(){

    //dom events -----
    this.events={
        'click #language-switcher input[type="radio"]': function(e){
            this.current_language = $(e.target).val();
        }
        ,'click .create-gcontainer-button': function(){
            this.collection.add(new Group());
        }
    };

    //model events -----

    this.listenTo(this.collection,'add',function(group){
        var group = new GroupView({ model: group });
        this.group_views[group.cid] = group;
        this.groups_container.append(group.el);
        EventTools.trigger("group_view:create",{ lang:this.current_language });
    });

    this.listenTo(this.collection,'destroy',function(model){
        console.log('removing model:', model);
    });

    //emitter events ---

    EventTools.on('group_view:clear',this.refresh_groups, this);

}//set_events

Answer 2

正如我在上面评论的那样，由于一些奇怪的原因，将事件放在initialize（）或set_events（）中会无声地失败。我发现做其中一个2，骨干没有找到事件。这个主干的视图函数说明未定义到控制台：

delegateEvents: function(events) {
  events || (events = _.result(this, 'events'));

  console.log(events); //outputs undefined

  if (!events) return this;
  this.undelegateEvents();
  for (var key in events) {
    var method = events[key];
    if (!_.isFunction(method)) method = this[method];
    if (!method) continue;
    var match = key.match(delegateEventSplitter);
    this.delegate(match[1], match[2], _.bind(method, this));
  }
  return this;
},

但是，如果我将事件放置为常规视图属性，就像我在主要问题上的代码一样，它将正确记录事件。

Backbone的视图'events'属性仅适用于DOM事件吗？

2 个答案: