Wie fangen Formular einreichen mit Backbone.js

Question

Wenn ich testen und auf meine apply Schaltfläche klicken, nachdem ich Daten in meine Eingabefelder eingegeben habe, bekomme ich eine Datei nicht gefunden Fehler.

Die Schaltfläche Login ist eine Dummy-Schaltfläche ohne Funktionalität. Ich möchte nur eine Warnmeldung anzeigen, die besagt: "Sie haben sich als (Benutzername hier) erfolgreich angemeldet !!!" nach Anwenden wird geklickt.

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

Warum ein Datei Fehler nicht gefunden?

Sie eine Datei erhalten nicht Fehler gefunden, weil das Formular abgeschickt wird und die Aktion ist "/login" mit der Standardmethode eine GET Anforderung zu sein, so dass der einreichen macht eine GET Anfrage an die login Seite, aber es existieren auf dem Server nicht . Der Server gibt einen File not found Fehler zurück.

Wie verhindert man das Senden?

Sie müssen die Übermittlung mit JavaScript stoppen. Um dies zu tun, fangen Sie zuerst das Submit-Ereignis ab und rufen Sie dann .preventDefault() für das Submit-Ereignisobjekt auf.

Wie fangen Sie das Submit-Ereignis mit Backbone?

Backbone bietet die events property auf Ansichten.

Die Ereignisse Hash (oder Methode) kann eine Reihe von DOM-Ereignisse angeben, verwendet werden, die Methoden auf Ihrer Ansicht durch delegateEvents gebunden werden.

Im Folgenden ist der einfachste Weg, um eine submit Falle fangen, gewährt das Wurzelelement der Ansicht, die Form, wie in Ihrem Code.

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

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

Hier vereinfachte ich Ihre Ansicht:

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); 
    } 
}); 

das Attribut Form Tasten Typ angeben, wie es submit standardmäßig ist. So macht die #login-button eine type="button" stellt sicher, dass es eine Übermittlung nicht auslösen wird.

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

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

Warum funktioniert es nicht, wenn Sie den obigen genauen Code verwenden?

Beachten Sie, dass das Stammelement der Ansicht mit der el property angegeben ist.

In Ihrem ursprünglichen Code verwenden Sie jQuery's core function zum Suchen und Übergeben des Formularelements an die Ansicht. Aber damit es funktioniert, muss das Formularelement vorhanden sein, bevor das JS der Ansicht ausgeführt wird.

So sollte die HTML-Seitenstruktur wie folgt aussehen:

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