Question

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

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

模板：

<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>

当我绑定按钮时，将调用login函数。绑定表单提交事件，登录函数不会被调用。如果id＆amp; amp也可以得到绑定的表单。表单标签是模板的一部分，这不是我想要做的。

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

Answer 1

"submit #login-form" : "login"

我认为Backbone只会在后代中搜索此ID。所以它永远不会匹配你自己的视图元素。你为什么不用它：

"submit": "login"

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

修改
如果您放置一个选择器，Backbone将调用

this.$el.on(event, selector, method);

而不是

this.$el.on(event, method);

而jQuery的on方法只会将选择器应用于元素的后代，不包括元素本身。

Answer 2

你使用的是Backbone错误的。那么你想要做什么，

template: my_template_string,
render: function () {
    this.el.innerHTML = this.template();
},
events: {
    "submit #login-form": function (event) {}
}

this.template设置为

的位置

<form id="login-form" class="navbar-form">
    <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>
</form>

并不是只才有意义吗？为什么要将id和classname与输入元素分开？顺便说一句，你仍然可以在submit上进行裸体捕获，但只有在我的方法中，

<form>类，<form>属性与表单的模板绑定，而不仅仅是骨干视图，
您将明确捕获正确的提交，
你能不能支持多个提交事件（如果一个模板有两个表单）。

Answer 3

也许当你绑定表单提交事件时，它只是提交表单会触发'submit'事件。您可以添加以下代码并再次尝试。

$('#id').submit(function(ev) {

});

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

3 个答案: