我如何获得 Backbone.js 绑定提交事件到一个表单?

lbsnaicq  于 2022-11-10  发布在  其他
关注(0)|答案(3)|浏览(217)

我将使用以下代码创建视图:

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>

当我绑定在按钮上时,会调用登录函数。绑定在表单提交事件上时,不会调用登录函数。如果id和form标记是模板的一部分,我还可以绑定表单,但这不是我在这里要做的。
在这种情况下,我如何绑定表单提交?

l7wslrjt

l7wslrjt1#

"submit #login-form" : "login"

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

"submit": "login"

就像你为改变而做的那样。
我去检查一下 Backbone 的代码

编辑:

如果你把一个选择器,Backbone就会调用

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

而不是

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

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

im9ewurl

im9ewurl2#

您用错了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>

这难道不是 only 有意义吗?为什么要将id和classname从input元素中分离出来?顺便说一句,您仍然可以在submit上执行裸catchall,但只有在我的方法中才会这样做。

  • <form>类和<form>属性绑定到表单的模板,而不仅仅是 Backbone.js 视图,
  • 您是否会显式地捕获正确的提交,
  • 您是否可以支持多个提交事件(在一个模板有两个表单的情况下)。
huwehgph

huwehgph3#

也许当你绑定在表单提交事件上时,只有提交表单才会触发'submit'事件。你可以添加下面的代码,然后再试一次。

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

});

相关问题