Question

我已将我的Web应用程序从Backbone 0.9.10升级到Backbone 1.2.1，一切都很好，只有一个例外。请参阅以下代码：

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事件没有问题。现在它没有触发，当我在console.log(this.targetLoc);函数中events时，它表示this.targetLoc 未定义。

我甚至尝试添加：

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

到initialize功能无济于事。

此应用程序正在使用：

jQuery 1.9.1
jQuery UI 1.10.3
Underscore 1.8.3
Bootstrap JS 2.3.1
要求2.1.5
Backbone 1.2.1（原为0.9.10）

显然，从Backbone的0.9到1.2有什么变化，关于如何解决我的问题的任何想法？

Answer 1

根据changelog，在1.2.0中，视图如何委托他们的活动发生了变化

现在，视图总是在setElement中委托他们的事件。您无法再在初始化时修改事件哈希或视图的el属性。

因此，您无法再依赖于在initialize中设置的属性来动态创建事件哈希。但是，您还可以使用constructor。

快速demo关于plunker显示这适用于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的原始构造函数。

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

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

将Backbone从0.9升级到1.2

1 个答案: