带有特定名称的Backbone.js事件处理程序会导致嵌套视图出错

Question

我为HTML表单和提交按钮嵌套了以下骨干视图:

var Button = Backbone.View.extend({
    enable: function() {
        this.$el.prop('disabled', false);
        return this;
    },
    disable: function() {
        this.$el.prop('disabled', true);
    }
};
var Form = Backbone.View.extend({
    el: '#login-form',
    events: {
        'submit': 'submit'
    },
    initialize: function() {
        this.submitBtn = new Button({el: this.$el.find(':submit')});
    }
    submit: function(e) {
        this.submitBtn.disable();
        // Do AJAX request and re-enable submit upon completion
        // ...
        return e.preventDefault();
    }
};

问题是，当我点击提交按钮时，我得到以下错误:

TypeError: 'undefined' is not a function (evaluating 'n.apply(t,r.concat(o.call(arguments)))')

并且Form实例的submit函数永远不会被调用

Answer 1

在我的头撞到我的桌子后，我已经设法通过重命名处理程序函数来解决这个问题:

var Form = Backbone.View.extend({
    // ...
    events: {
        'submit': 'submitHandler'
    },
    // ...
    submitHandler: function(e) { /* ... */ }
};

然而，有两件事很奇怪。(1)如果我删除嵌套的按钮视图，一个名为submit的处理程序如预期的那样工作，(2)与按钮视图在适当的地方，重命名表单视图的提交事件处理程序，而不是submit将工作。

这是怎么回事?有什么神奇的调用处理函数submit ?