提出イベントをフォームにバインドするバックボーンを取得するにはどうすればよいですか？

Question

私はビューを作成するには、次のコードを使用しています：

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 

とテンプレートを：

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

私はボタンにバインドすると、ログイン機能が呼び出されます。フォーム送信イベントにバインドすると、ログイン関数は呼び出されません。 id &フォームタグがテンプレートの一部である場合は、フォームを取得することもできます。これはここでやりたいことではありません。

この場合、フォーム送信時にバインドするにはどうすればよいですか？

Answer 1

"submit #login-form" : "login" 

backboneは、このIDを子孫の中からのみ検索します。したがって、あなたのビュー要素には決して一致しません。なぜあなただ​​けで使用しないでください：

"submit": "login" 

変更のためにしました。
確かにバックボーンのコードをチェックするつもりです。

編集：あなたは、セレクタを置く場合
、バックボーンではなく

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

の

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

を呼ぶとjQueryの方法に代わり子孫にセレクタを適用しますの要素のみを除き、要素自体は除きます。

Answer 2

間違ったバックボーンを使用しています。それでは、あなたはthis.templateが

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

に設定され、そののみは意味がありません？

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

、やりたいとしていますかなぜあなたはidとclassnameを入力要素から分離したいのですか？ところで、あなたはまだsubmitに裸のキャッチオールを行うことができますが、唯一の私の方法では、

• <form>クラス、および<form>属性が
• 、ちょうどバックボーンビューをします、フォームのテンプレートに縛られ、そしてないであろう明示的に正しいサブミットをキャプチャしている場合、
• 複数の送信イベント（1つのテンプレートに2つのフォームがある場合）をサポートできますか？

Answer 3

多分、フォーム送信イベントでバインドすると、フォームは「送信」イベントを発生させるだけで送信されます。以下のコードを追加してもう一度やり直すことができます。

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

});