Backbone js événement clic du bouton de pas de tir
J'ai une fonction ajax sur l'initialisation du routeur principal qui semble faire obstacle à la manifestation de mon signin bouton signin.js
. Quand je signin cliquez sur le bouton, il n'a pas d'exercer sa fonction, au lieu que le navigateur endroits les entrées sur l'URL, (c'est à dire nom d'utilisateur et mot de passe).
Mais lorsque je retire l'ajax fonction de l'initialiser, je peux vous connecter.
J'ai inclus certains des codes que je suis en train de travailler sur. Grâce
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;
}
});
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>
Pouvez-vous inclure votre HomeView code ? Et où avez-vous instancier la SigninView ?
J'ai ajouté le
Si vous supprimez les deux lignes de votre ajax fonction : $('.pagewrap').html( ... ; il fonctionne toujours ?
eh bien, il va perdre de son but et je ne serais pas en mesure de tester le signin bouton comme il est dans la
Désolé, je pensais que vous étiez à l'aide de <a /> liens. Ma réponse empêche liens par défaut de comportement.
J'ai ajouté le
homeView
rien de fantaisie. var signinView = new SigninView();
Je l'ai placé au bas de signin.js si c'est ce que vous demandezSi vous supprimez les deux lignes de votre ajax fonction : $('.pagewrap').html( ... ; il fonctionne toujours ?
eh bien, il va perdre de son but et je ne serais pas en mesure de tester le signin bouton comme il est dans la
homeView
Désolé, je pensais que vous étiez à l'aide de <a /> liens. Ma réponse empêche liens par défaut de comportement.
OriginalL'auteur OneScrewLoose | 2014-01-27
Vous devez vous connecter pour publier un commentaire.
Ok, j'ai compris quel est ton problème 🙂
Voici un exemple qui reprend votre code jsfiddle.net/26xf4/6. Le problème, c'est que vous n'appelez pas
new SigninView()
; (instancier le point de vue) d'où son les événements ne sont jamais liés.Donc, dans cet exemple, essayez de décommenter la ligne 43 et votre code fonctionne comme prévu, parce que lorsque vous instanciez un point de Vue
(new SigninView())
son constructeur appelle ladelegateEvents()
fonction (vous ne le voyez pas dans votre code, il est dans le backbone.js) permettant les événements que vous déclarez dans votre point de vue :même si je n'ai pas de
render
fonction dans masigninView
?Essayé
new SigninView().render();
ça fonctionne maintenant, merci! Pourriez-vous expliquer pourquoi ce qui se passe ?Vous n'avez pas besoin d'appeler
render
si vous voulez, j'ai mis à jour ma réponse.Donc, il y a un autre point de vue pointant vers la même el
#signin-container
et il est instancié après votreSigninView
vue, donc la première vue des événements de liaison sont perdus.OriginalL'auteur Rida BENHAMMANE
Vous avez besoin pour prévenir le comportement par défaut de la
submit
bouton dans votreclick
gestionnaire. Vous pouvez le faire comme ceci:Sinon, vous pourriez envisager d'utiliser le html
button
élément qui ne tente pas de les soumettre le formulaire auquel il est associé.return false;
juste après la fonction ajax. Mais encore, il ne fait pas deconsole.log('signin');
Avez-vous essayé d'utiliser un élément de bouton à la place?
le résultat sera le même, le problème est à l'intérieur de l'ossature pas dans le html
Je suis en désaccord. Le bouton "soumettre" est en train d'essayer de soumettre le formulaire, qui est pourquoi vous voyez les valeurs d'un formulaire dans l'URL. Essayez ma mise à jour de réponse.
Pensez-vous vous permettre de recréer le problème dans jsfiddle.net?
OriginalL'auteur net.uk.sweet
Je ne sais pas à propos de vos maquettes HTML, ma meilleure supposition est que vous êtes la capture de l'événement incorrect ici. Si vous êtes à la soumission d'un formulaire, vous devez attraper
submit form
événement à ne pasclick #some-button
. Parce que même si vous attrapezclick
événement de bouton à l'intérieur d'un formulaire et de le retourner false, le formulaire sera toujours soumis, car ceux sont 2 événements différentssubmit #buttonName
c'est toujours le mêmePourriez-vous mettre votre code HTML ici aussi? Cela pourrait aider
Et btw, vous avez besoin pour écouter la
form
lui-même, comme danssubmit #form-id
passubmit #buttonName
J'ai posté le code html.
Ensuite, vous devrez changer
"click #btn-signin" : "submit"
à"submit #signin-containe" : "submit"
OriginalL'auteur Tan Nguyen