Come si ottiene backbone per associare l'evento di invio a un modulo?

Question

Sto utilizzando il seguente codice per creare la vista:

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 

E il modello:

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

Quando mi legano sul pulsante, la funzione di login viene chiamata. Binding sul modulo submit event, la funzione di login non viene chiamata. Posso anche ottenere il modulo da associare se il tag form id & fa parte del modello, che non è quello che voglio fare qui.

Come si esegue il binding del modulo di invio in questo caso?

Answer 1

"submit #login-form" : "login" 

Penso che Backbone cercherà questo ID solo tra i discendenti. Quindi non corrisponderà mai al tuo elemento di vista. Perché non usi semplicemente:

"submit": "login" 

Come hai fatto per il cambiamento.
Per controllare, controlla il codice di Backbone.

Edit:
Se si mette un selettore, Backbone chiamerà

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

invece di

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

E la al metodo di jQuery sarà invece applicare il selettore per i discendenti solo dell'elemento, escluso l'elemento stesso.

Answer 2

Si sta utilizzando Backbone errato. Allora, cosa hai intenzione di voler fare,

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

Dove this.template è impostato su

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

E non che solo senso? Perché vuoi che id e classname siano separati dagli elementi di input? A proposito, si può ancora fare il catchall nudo su submit, ma solo nel mio metodo,

• classe <form>, e l'attributo <form> essere legato al modello del form, e non solo la vista dorsale,
• sarà stai catturando esplicitamente l'invio corretto,
• puoi mai supportare più eventi di invio (nel caso in cui un modello abbia due moduli).

Answer 3

Forse Quando si vincola al modulo di invio evento, è solo inviare il modulo verrà generato l'evento 'invia'. potresti aggiungere sotto il codice e riprovare.

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

});