Backbone.jsを使用してフォームを送信する方法

Question

入力フィールドにデータを入力した後、テストしてapplyボタンをクリックすると、というファイルが見つからないというファイルが表示されます。

Loginボタンは機能のないダミーボタンです。私はという警告ボックスを表示するだけです。 "あなたはここで（ユーザー名はここに）連続してログインしました!!!"申し込み後をクリックします。

var Credentials = Backbone.Model.extend({}); 

var LoginView = Backbone.View.extend({ 
    el: $("#login-form"), 

    events: { 
    "click #login": "login" 
    }, 

    initialize: function(){ 
    var self = this; 

    this.firstname = $("#username"); 
    this.lastname = $("#lastname"); 
    this.number = $("#number"); 
    this.username = $("#username"); 
    this.password = $("#password"); 

    this.firstname.change(function(e){ 
     self.model.set({firstname: $(e.currentTarget).val()}); 
    }); 

    this.lastname.change(function(e){ 
     self.model.set({lastname: $(e.currentTarget).val()}); 
    }); 

    this.number.change(function(e){ 
     self.model.set({number: $(e.currentTarget).val()}); 
    }); 

    this.username.change(function(e){ 
     self.model.set({username: $(e.currentTarget).val()}); 
    }); 

    this.password.change(function(e){ 
     self.model.set({password: $(e.currentTarget).val()}); 
    }); 
    }, 

    login: function(){ 
    var firstn= this.model.get('firstname'); 
    var lastn= this.model.get('lastname'); 
    var numb= this.model.get('number'); 
    var user= this.model.get('username'); 
    var pword = this.model.get('password'); 

    alert("You logged in as " + user + "Succesfully!!!"); 

    return false; 
    } 
}); 

window.LoginView = new LoginView({model: new Credentials()}); 
}); 

---

<form action="/login" id="login-form" align="left"> 
    <h1> Your Registration Form:</h1> 

    First Name <input type="text" id="firstname" placeholder="First Name"> 
    Last Name <input type="text" id="lastname" placeholder="Last Name"> 
    Phone No. <input type="text" id="number" placeholder="1(555)555-5555"> 
    UserName <input type="text" id="username" placeholder="UserName"> 
    Password <input type="password" id="password" placeholder="Password"> 

    <button id="login" onclick="">Apply</button> 
    <!-- dummy button --> 
    <button id="login-button">Login</button> 
</form> 

Answer 1

ファイルがエラーを発見しないのはなぜ？

フォームが送信とアクションがデフォルトの方法がGET要求された状態で"/login"ので、提出がloginページにGET要求を行うが、それはサーバー上に存在していないされているのであなたは、ファイルが見つからないエラーが発生します。サーバーはFile not foundエラーを返します。

送信を防止するにはどうすればよいですか？

JavaScriptを使用して送信を停止する必要があります。これを行うには、まずサブミットイベントをキャッチし、サブミットイベントオブジェクトの.preventDefault()を呼び出します。

バックボーンでサブミットイベントをキャッチするにはどうすればよいですか？

バックボーンには、events propertyが表示されます。

イベントハッシュ（またはメソッド）がdelegateEventsを通して、あなたのビューのメソッドにバインドされるDOMイベント のセットを指定するために使用することができます。次

が

submitイベントをキャッチする最も簡単な方法で、ビューのルート要素は、あなたのコードのように、フォームで付与されました。ここで

events: { 
    "submit": "onSubmit", 
}, 

onSubmit: function(e) { 
    // `e` being a standard DOM event 
    e.preventDefault(); 
} 

私はあなたのビューを簡素化：それは、デフォルトでsubmitだとして

var LoginView = Backbone.View.extend({ 
    // Put the string into a template to ease the manipulation later on. 
    template: _.template("You logged in as <%= username %> and a password of <%= password %>\nFirstName:<%= firstname %>\nLastName:<%= lastname %>\nNumber:<%= number %>"), 
    el: $("#login-form"), 

    events: { 
     // listen for the submit event of the form 
     "submit": "onSubmit", 
     // listen to events from here 
     "change #username": 'onUsernameChange' 
    }, 

    initialize: function() { 
     // it's a good idea to cache jQuery objects like this. 
     this.firstname = $("#username"); 
     this.lastname = $("#lastname"); 
     this.number = $("#number"); 
     this.username = $("#username"); 
     this.password = $("#password"); 

     // but avoid extensive `change` listeners as it's inefficient and 
     // useless in this case. If you want to listen to changes, do it 
     // in the events hash, like the "onUsernameChange" example. 
    }, 

    onSubmit: function(e) { 
     // prevent the submit and do what you want instead 
     e.preventDefault(); 

     // Set directly with an object, it's quick and clean. 
     this.model.set({ 
      firstname: this.firstname.val(), 
      lastname: this.lastname.val(), 
      number: this.number.val(), 
      username: this.username.val(), 
      password: this.password.val() 
     }); 

     // use the template for the alert. 
     alert(this.template(this.model.toJSON())); 
    }, 

    onUsernameChange: function(e) { 
     // no need for jQuery for a trivial value retrieval 
     console.log(e.currentTarget.value); 
    } 
}); 

は、フォームのボタンのtype属性を指定します。したがって、#login-buttonをtype="button"にすると、送信がトリガーされません。

<button type="submit" id="login">Apply</button> 

<!-- dummy button --> 
<button type="button" id="login-button">Login</button> 

上記の正確なコードを使用すると、なぜ機能しないのですか？

ビューのルート要素がel propertyで指定されていることに注意してください。

最初のコードでは、jQuery's core functionを使用して、フォーム要素を見つけてビューに渡しています。しかし、それが動作するには、ビューのJSを実行する前にフォーム要素が存在していなければなりません。（「このコードが機能しない理由**？」）デバッグの助けを求めている

<html> 
    <head> 
     <!-- head stuff like CSS, title, etc. --> 
    </head> 
    <body> 
     <form id="login-form"> 
      <!-- rest of the form goes here --> 
     </form> 

     <!-- Load the scripts here --> 
     <script src="libs/jquery/dist/jquery.js"></script> 
     <script src="libs/underscore/underscore.js"></script> 
     <script src="libs/backbone/backbone.js"></script> 

     <!-- then your own code can go here, or into another js file. --> 
     <script> 
      // your view, etc. 
     </script> 
    </body> 
</html>