Comment lier un formulaire backbone à un événement?

Question

J'essaie d'implémenter un formulaire de connexion simple avec Backbone, en utilisant la bibliothèque backbone-forms.

$(function() { 
    var LoginUser = Backbone.Model.extend({ 
    schema: { 
     username: { type: 'Text' }, 
     password: { type: 'Text' } 
    }, 
    url: 'login_backbone_form' 
    }); 

    var thisLogin = new LoginUser(); 

    var form = new Backbone.Form({ 
    model: thisLogin, 
    events: { 
     "click button#formButton" : "saveForm" 
    }, 

    saveForm: function() { 
     alert('hit saveForm'); 
     this.model.save(); 
    } 
    }).render(); 

    window.form = form; 
    $('#formHook').html(form.el); 
    $('<button type="button" name="login" id="formButton">Login</button>') 
    .appendTo('#formHook'); 
}); 

Mon HTML a un div id = 'formHook', et la page un formulaire avec un bouton de connexion. Mais appuyer sur le bouton ne fait rien.

Qu'est-ce que je fais mal ici?

Answer 1

Le premier problème pourrait être que votre bouton de formulaire est en dehors du contexte de la vue de formulaire. Lorsque vous attachez des gestionnaires d'événements DOM à une vue, ils ne répondent qu'aux éléments de cette vue. Essayez d'intégrer le formulaire et le bouton dans une vue principale.

est ici le code et il y a aussi dans un jsFiddle ici: http://jsfiddle.net/evilcelery/hsSru/

$(function() { 
    var LoginUser = Backbone.Model.extend({ 
     schema: { 
      username: { 
       type: 'Text' 
      }, 
      password: { 
       type: 'Text' 
      } 
     }, 
     url: 'login_backbone_form' 
    }); 

    var LoginView = Backbone.View.extend({ 
     events: { 
      "click button#formButton": "saveForm" 
     }, 

     initialize: function() { 
     this.model = new LoginUser(); 
     }, 

     render: function() { 
     var $button = $('<button type="button" name="login" id="formButton">Login</button>'); 

     this.form = new Backbone.Form({ model: this.model }); 

     this.$el.append(this.form.render().el); 
     this.$el.append($button); 

     return this; 
     }, 

     saveForm: function() { 
      this.form.commit(); 
      this.model.save(); 

      alert('hit saveForm'); 
      console.log(this.model.toJSON()); 
     } 
    }); 

    window.loginView = new LoginView; 
    $('#formHook').html(loginView.render().el); 
});