Backbone js button-Klick-Ereignis nicht auslösen.
Ich habe eine ajax-Funktion auf die Initialisierung der Haupt-router, der scheint zu hindern, die Falle meiner signin-button in signin.js
. Wenn ich auf die signin-button, es muss nicht seine Funktion, sondern die browser stellen die Eingänge für die URL (d.h. Benutzername und Passwort).
Aber wenn ich entfernen Sie die ajax-Funktion initialisieren, ich kann mich erfolgreich einloggen.
Habe ich einige der codes, die ich auf Arbeit bin. Dank
main.js
initialize: function(){
$.ajax({
type: "GET",
url: "something here",
contentType: "application/json",
headers: {
'someVar': something here
},
statusCode: {
404: function() {
console.log('404: logged out');
if (!this.loginView) {
this.loginView = new LoginView();
}
$('.pagewrap').html(this.loginView.el);
},
200: function() {
console.log('200');
if (!this.homeView) {
this.homeView = new HomeView();
}
$('.pagewrap').html(this.homeView.el);
}
}
});
//return false;
},
signin.js
var SigninView = Backbone.View.extend ({
el: '#signin-container',
events: {
"click #btn-signin" : "submit"
},
submit: function () {
console.log('signin');
$.ajax({ ... });
return false;
}
});
var toSignin = new SigninView();
window.anotherSigninView = Backbone.View.extend({
initialize: function() {},
render: function() {}
});
home.js
window.HomeView = Backbone.View.extend ({
initialize: function() {
this.render();
},
render: function() {
$(this.el).html( this.template() );
return this;
}
});
einige html -
<form id="signin-container">
<table id="tbl-signin">
<tr>
<td><div class="input-box"><input class="input-text" type="text" name="username" placeholder="Username"></div></td>
<td><div class="input-box"><input class="input-text" type="password" name="password" placeholder="Password"></div></td>
<td><input id="btn-signin" class="button" value="Sign In"></td>
</tr>
<tr>
<td class="opt"><input class="checkbox" type="checkbox" name="rememberMe" value="true"><label class="opt-signin">Remember Me?</label></td>
<td class="opt"><a class="opt-signin" href="#">Forgot Password?</a></td>
<td></td>
</tr>
</table>
</form>
Können Sie Ihre HomeView code ? Und wo hast du das instanziieren der SigninView ?
Ich habe die
Wenn Sie löschen Sie die beiden Zeilen deines ajax-Funktion : $('.pagewrap').html - ( ... ; es funktioniert immer noch ?
gut, es verliert seinen Zweck und ich wäre nicht in der Lage zu testen, die signin-button, wie es in der
Sorry, ich dachte, Sie waren mit <a /> links. Meine Antwort wird verhindert, dass links standardmäßig Verhalten.
Ich habe die
homeView
nichts besonderes, obwohl. var signinView = new SigninView();
Ich stellte es auf den Boden signin.js wenn das ist, was du fragstWenn Sie löschen Sie die beiden Zeilen deines ajax-Funktion : $('.pagewrap').html - ( ... ; es funktioniert immer noch ?
gut, es verliert seinen Zweck und ich wäre nicht in der Lage zu testen, die signin-button, wie es in der
homeView
Sorry, ich dachte, Sie waren mit <a /> links. Meine Antwort wird verhindert, dass links standardmäßig Verhalten.
InformationsquelleAutor OneScrewLoose | 2014-01-27
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ok, dachte ich, was ist dein problem 🙂
Hier ist ein Beispiel, Lebensläufe Ihrem code jsfiddle.net/26xf4/6. Das problem ist, dass Sie nicht nennen
new SigninView()
; (instanziieren der view), also, seine Veranstaltungen sind nie gebunden.So, in diesem Beispiel versuchen Sie, heben Sie die Auskommentierung der ligne 43 und Ihr code wie erwartet funktioniert, weil, wenn Sie instanziieren ein Blick
(new SigninView())
seinem Konstruktor ruft diedelegateEvents()
Funktion (die Sie nicht sehen dies in Ihrem code, es ist in der backbone.js), die es ermöglicht, die Ereignisse, die Sie erklären in Ihrem Blick :obwohl ich nicht
render
Funktion in meinemsigninView
?Versucht
new SigninView().render();
es funktioniert jetzt vielen Dank! Könnten Sie bitte erklären, warum dies passiert ist ?Sie brauchen nicht zu rufen
render
wenn Sie wollen, ich aktualisierte meine Antwort.So es gibt eine andere Sicht auf das gleiche el
#signin-container
und es instanziiert nach IhremSigninView
- Blick, also die erste Sicht, die Veranstaltungen verbindlich sind verloren.InformationsquelleAutor Rida BENHAMMANE
Müssen Sie verhindern, dass das default-Verhalten der
submit
- button in Ihremclick
handler. Sie können dies tun, etwa so:Alternativ können Sie erwägen Sie die Verwendung der html -
button
element, das nicht versucht, das Formular zu senden, der Sie zugeordnet ist.return false;
direkt nach der ajax-Funktion. Aber noch ist es nichtconsole.log('signin');
Haben Sie versucht, mit einem button-element statt?
das Ergebnis wird das gleiche sein, das problem innerhalb der backbone nicht im html
Ich bin nicht einverstanden. Der submit-button versucht, das Formular zu senden, das ist, warum Sie sehen die Formular-Werte in der URL. Versuchen Sie, meine aktualisierte Antwort.
Glauben Sie, Sie könnten das problem reproduzieren in jsfiddle.net?
InformationsquelleAutor net.uk.sweet
Ich weiß nicht, über Ihr HTML-mockup, meine beste Vermutung ist, dass Sie fangen die falsche Veranstaltung finden Sie hier. Wenn Sie ein Formular abgeschickt werden, Sie fangen sollte
submit form
Ereignis nichtclick #some-button
. Denn auch wenn Sie fangenclick
- Ereignis der Schaltfläche in einem Formular und geben Sie false zurück, das Formular wird trotzdem eingereicht, weil das sind 2 verschiedene Veranstaltungensubmit #buttonName
es ist immer noch das gleicheKönnten Sie Ihre HTML hier? Es könnte helfen
Und btw, müssen Sie zu hören Sie die
form
sich, wie insubmit #form-id
nichtsubmit #buttonName
Ich habe den html-code.
Dann müssen Sie ändern
"click #btn-signin" : "submit"
zu"submit #signin-containe" : "submit"
InformationsquelleAutor Tan Nguyen