如何获取骨干将提交事件绑定到表单?

Jim*_*ows 15 backbone.js backbone-events backbone-views

我正在使用以下代码来创建视图:

LoginForm = Backbone.View.extend({

    tagName :"form"
    ,id : "login-form"
    ,className :"navbar-form"
    ,initialize: function () {
            this.model = new StackMob.User();
            this.render();
    }
    ,render: function () {
            $(this.el).html(this.template());
            return this;
    }
    ,events : {
            "change" : "change"
            ,"submit #login-form" : "login"
    }
    ,login : function( event) {
            event.preventDefault();
            var self = this;
            this.model.login(true, {
                    success: function( model) {
                            app.alertSuccess( "User logged in");
                            self.render();
                    }
                    ,error: function( model, response) {
                            app.alertError("Could not login  user: " + response.error_description);
                    }
            });
            event.currentTarget.checkValidity();
            return false;
    }
// rest of code
Run Code Online (Sandbox Code Playgroud)

和模板:

<input name="username" class="span2" type="email" placeholder="Email" required >
<input name="password" class="span2" type="password" placeholder="Password" required >
<button id="login-button" type="submit" class="btn">Sign in</button>
Run Code Online (Sandbox Code Playgroud)

当我绑定按钮时,将调用登录函数.绑定表单提交事件,登录函数不会被调用.如果id和form标签是模板的一部分,我也可以获取要绑定的表单,这不是我想要做的.

在这种情况下,如何绑定表单提交?

Loa*_*oof 36

"submit #login-form" : "login"
Run Code Online (Sandbox Code Playgroud)

我认为Backbone只会在后代中搜索这个id.所以它永远不会匹配你自己的视图元素.你为什么不用它:

"submit": "login"
Run Code Online (Sandbox Code Playgroud)

正如你所做的那样.
要检查Backbone的代码是为了确定.

编辑:
如果你放一个选择器,Backbone会调用

this.$el.on(event, selector, method);
Run Code Online (Sandbox Code Playgroud)

代替

this.$el.on(event, method);
Run Code Online (Sandbox Code Playgroud)

而jQuery的on方法将把选择器仅应用于元素的后代,不包括元素本身.

  • 相关文档隐藏在[`delegateEvents`](http://backbonejs.org/#View-delegateEvents)文档中:"省略`selector`会导致事件绑定到视图的根元素`(this.el )`". (3认同)