web-dev-qa-db-fra.com

Comment puis-je obtenir l'épine dorsale pour lier l'événement submit à un formulaire?

J'utilise le code suivant pour créer la vue:

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

Et le modèle:

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

Lorsque je lie sur le bouton, la fonction de connexion est appelée. En liaison avec l'événement de soumission de formulaire, la fonction de connexion n'est pas appelée. Je peux également obtenir le formulaire à lier si les balises id et form font partie du modèle, ce que je ne veux pas faire ici.

Comment puis-je me lier sur le formulaire soumis dans ce cas?

backbone.jsbackbone-viewsbackbone-events
15
Jim Barrows
"submit #login-form" : "login"

Je pense que Backbone recherchera cet identifiant uniquement parmi les descendants. Donc, cela ne correspondra jamais à votre propre élément de vue. Pourquoi n'utilisez-vous pas simplement:

"submit": "login"

Comme tu l'as fait pour le changement.
Je vais vérifier le code de Backbone juste pour être sûr.

Modifier:
Si vous mettez un sélecteur, Backbone appellera

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

au lieu de

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

Et la méthode on de jQuery appliquera à la place le sélecteur aux descendants de l'élément uniquement, à l'exclusion de l'élément lui-même.

36
Loamhoof

Vous utilisez mal Backbone. Alors qu'est-ce que tu vas vouloir faire,

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

Où this.template est défini sur

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

Et est-ce que seulement a un sens? Pourquoi voudriez-vous que l'id et le nom de la classe soient séparés des éléments d'entrée? BTW, vous pouvez toujours faire le fourre nu sur submit, mais seulement dans ma méthode sera,

  • l'attribut <form> et l'attribut <form> doivent être liés au modèle du formulaire, et pas seulement à la vue dorsale,
  • allez-vous capturer explicitement le bon soumettre,
  • pouvez-vous prendre en charge plusieurs événements de soumission (dans le cas où un modèle possède deux formulaires).
3
Evan Carroll

Peut-être que lorsque vous liez sur l'événement de soumission de formulaire, il s'agit uniquement de soumettre le formulaire qui déclenche l'événement 'soumettre'. vous pouvez ajouter le code ci-dessous et réessayer.

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

});
0
suoyong