将Backbone从0.9升级到1.2后，不会触发Backbone View事件 [英] Backbone View event not firing after upgrading Backbone from 0.9 to 1.2

问题描述

我已经将Web应用程序从Backbone 0.9.10升级到Backbone 1.2.1，并且一切都很好，除了一个例外.请参见下面的代码:

I have upgraded my web application from Backbone 0.9.10 to Backbone 1.2.1, and everything is great with one exception. See the code below:

define( ['underscore', 'backbone', 'text!templates/myResults.html'], function (_, Backbone, Template) {

  var myView = Backbone.View.extend({

    el: '#myResults',

    initialize: function (options) {
        this.targetLoc = options.targetLoc;         
    },

    events: function() {            
        var _events = {};
        _events ['show ' + this.targetLoc + ' a'] = 'tabClicked';           
        return _events;
    },

    tabClicked: function (e) {
        ....stuff....
    }

    template:  _.template(Template),

    render: function() {
        var outputHTML = this.template({model: this.model.toJSON()});
        this.$el.append(outputHTML);
        return this;
    }   

  });

});

return myView;

在升级Backbone之前，我的tabClicked事件已正常启动.现在它不会触发，当我在events函数中console.log(this.targetLoc);时，它说this.targetLoc是未定义.

Before I upgraded Backbone, my tabClicked event fired without issue. Now it doesn't fire, and when I console.log(this.targetLoc); in the events function it says that this.targetLoc is undefined.

我什至尝试添加:

this.events['show ' + this.targetLoc + ' a'] = 'tabClicked';

至initialize功能无济于事.

此应用程序正在使用:

• jQuery 1.9.1
• jQuery UI 1.10.3
• 下划线1.8.3
• Bootstrap JS 2.3.1
• 需要2.1.5
• 骨干1.2.1(以前为0.9.10)

很明显，从Backbone的0.9更改为1.2，对如何解决问题有任何想法吗?

Obviously something changed from 0.9 to 1.2 of Backbone, any ideas on how I can fix my problem?

推荐答案

根据1.2中 changelog 的规定.0改变了视图委派事件的方式

As per the changelog, in 1.2.0 there was a change to how views delegate their events

视图现在始终将其事件委托给setElement.您不再可以在初始化中修改事件哈希或视图的el属性.

Views now always delegate their events in setElement. You can no longer modify the events hash or your view's el property in initialize.

因此，您不再可以依靠在initialize中设置的属性来动态创建事件哈希.但是，还有一个constructor可以使用.

So you can no longer rely on attributes you've set in initialize to dynamically create your event hash. However, there's also a constructor that you can use.

在plunker上快速进行 demo 即可显示此版本适用于1.2.2.

A quick demo on plunker shows that this works with 1.2.2.

var MyView = Backbone.View.extend({
  constructor: function(options) {
    this.eventTarget = options.eventTarget;
    Backbone.View.apply(this, arguments);
  },
  events: function() {
    var _events = {};
    _events['click ' + this.eventTarget] = 'clicked';
    return _events;
  },
  clicked: function(e) {
    console.log(e);
  },
  render: function() {
    this.$el.html('<a class="foo">click</a>');
  }
});

基本上，您应该能够通过将events所依赖的逻辑移到constructor中而不是在initialize中进行操作来解决此更改.唯一的警告是，您必须记住要调用Backbone.View的原始构造函数.

Basically you should be able to work around this change by moving the logic that events rely on into the constructor instead of doing it in initialize. The only caveat is that you must remember to call the original constructor of Backbone.View.

因此，请尝试将您的initialize替换为

So try to replace your initialize with

constructor: function (options) {
    this.targetLoc = options.targetLoc;
    Backbone.View.apply(this, arguments);         
},

这篇关于将Backbone从0.9升级到1.2后，不会触发Backbone View事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！