バックボーンフォームをイベントにリンクさせるにはどうすればよいですか？

Question

私は、バックボーンフォームライブラリを使用して、バックボーンを使って簡単なログインフォームを実装しようとしています。

$(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'); 
}); 

私のHTMLは、ID =「formHook」とdiv要素を持っており、ページがログインボタンを持つフォームを示しています。しかし、ボタンを押すことは何もしません。

私はここで間違っていますか？

Answer 1

最初の問題は、フォームボタンがフォームビューのコンテキスト外にある可能性があります。 DOMイベントハンドラをビューにアタッチすると、そのビュー内の要素にのみ応答します。マスタービュー内にフォームとボタンを埋め込みます。

は、ここでは、コードだし、ここJSFiddleでもあります： 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); 
});