backbone.jsbackbone-viewsbackbone-events

How do I get backbone to bind the submit event to a form?


I'm using the following code to create the view:

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

And the template:

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

When I bind on the button, the login function gets called. Binding on the form submit event, the login function does not get called. I can also get the form to bind if the id & form tag are part of the template, which is not what I want to do here.

How do I bind on the form submit in this case?


Solution

  • "submit #login-form" : "login"
    

    I think Backbone will search for this id among the descendants only. So it will never match your own view element. Why don't you just use:

    "submit": "login"
    

    As you did for change.
    Gonna check Backbone's code just to be sure.

    Edit:
    If you put a selector, Backbone will call

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

    instead of

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

    And the on method of jQuery will instead apply the selector to the descendants of the element only, excluding the element itself.