Accéder à `cette` en Ajax rappel, le tout dans un Objet
Je fais face à un problème à propos de l'Ajax de rappel à l'intérieur d'un Objet.
Veuillez considérer ce code :
Search.prototype =
{
ask : function( query )
{
//Display loader
$('.loader').show();
$.ajax({
dataType : 'jsonp',
type : 'GET',
url : 'http://api.deezer.com/search/track/',
data : {
output : 'jsonp',
q : query
}
}).done(function(res) {
this.loadResults( res );
//[Error] Object success has no method 'loadResult'
});
},
loadResults : function (res)
{
//Hide loader
$('.loader').hide();
console.log( res );
//doing some stuff
//...
}
}
var search = new Search();
search.ask( 'eminem' );
J'obtiens une erreur Object success has no method loadResult
, ce qui est logique car le rappel est une partie d'un anonyme en fonction jQuery.
Mais comment obtenir ma première instance de l'objet ?
J'ai essayé avec une var que = ce; avant l'appel Ajax, mais j'ai pas gagné fonctionne pas pour les mêmes raisons.
Je ne sais pas si c'est possible de le faire ou si le problème vient de mon code de l'organisation mondiale. Hésitez pas à me conseiller sur les meilleures pratiques 🙂
Merci par avance.
[Mise à jour (résolu)]
J'ai occulté certaines choses dans mon code j'ai bien qu'il était inutile de poster ici, mais j'ai enfin trouvé le problème un peu plus haut dans mon code.
Désolé à ce sujet.
Voici mon code complet, qui travaille maintenant :
define(['jquery'], function($) {
var Search = function()
{
this._keyDownTimer = 0;
this._searchDelay = 1000; //ms
};
Search.prototype =
{
//The init function that I though it was unnecessary to post here. Sorry :/
init : function()
{
$('#q').on('keydown', (function(evt) {
clearTimeout( this._keyDownTimer );
this._keyDownTimer = setTimeout( (function() {
this.ask( $('#q').val() );
}).bind( this ), this._searchDelay); /* <-- Here's the solution.
I forgot to bind `this`
to the timeout callback function,
so the `this` under all of my code
was referring to the anonymous function
of this callback. */
}).bind( this ));
},
ask : function( query )
{
//Display loader
$('.loader').show();
console.log(this); //Now `this` refers to my object :)
var req = $.ajax({
dataType : 'jsonp',
type : 'GET',
url : 'http://api.deezer.com/search/track/',
context : this,
data : {
output : 'jsonp',
q : query
}
});
req.done(function(res) {
this.loadResults(res);
});
},
loadResults : function (res)
{
//Hide loader
$('.loader').hide();
//doing some stuff
//...
}
};
return new Search;
});
Merci pour vos réponses, cela m'a vraiment aidé.
Pb résolu.
lorsque vous avez
var that = this
avez-vous également modifier this.loadResults()
à that.loadResults()
?Matt : oui je suppose que c'est le même problème. Alnitak : je l'ai fait avant de poster ici, ça ne change rien car je pense que
var that
champ d'application est défini dans le champ d'application de l' .méthode de recherche, et lorsque le rappel est tiré, var that
n'existe plus.OriginalL'auteur jmpp | 2013-10-09
Vous devez vous connecter pour publier un commentaire.
Il y a plusieurs façons de le faire.
Vous pouvez définir la
context
réglage pour l'ajax options:jQuery.ajax
context
Function.le prototype.bind
Cependant, ce n'est pas aussi largement pris en charge comme...
jQuery.proxy
Créé à cet effet.
De l'affectation de cette à une autre valeur
C'est généralement fait en JavaScript pour donner accès à
this
en bas étendues.Flèche fonctions lexicales de liaison
OriginalL'auteur Explosion Pills
Vous pouvez utiliser le $.ajax()
context
objet ici comme:.error(function (res) {...}
et peuvent être enchaînés à l'appelthis.loadResults( res )
n'a pas fonctionné dans mon cas, mais il a travaillé lors de l'omission de "ceci", c'est à dire doit êtreloadResults( res )
OriginalL'auteur palaѕн
Vous pouvez utiliser l'ES5
.bind
fonction pour définirthis
correctement:(utilisation de la cale sur le lien ci-dessus, ou le jQuery
$.proxy
équivalent sur les anciens navigateurs).Vous pouvez également ajouter
context: this
à la$.ajax
options:Noter que dans les deux cas, vous devrez remplacer jQuery comportement par défaut de transmission de l'ajax option objet dans
this
.p.s. c'est aussi une bonne pratique pour
return
le résultat de la$.ajax()
chaîne de sorte que l'utilisateur de votre objet en chaîne de rappels supplémentaires (par exemple, un.fail
gestionnaire).this
à la fonction de rappel (anonyme et directement surthis.loadResults
) mais j'ai toujours l'erreur initiale 🙁en effet, sur voir votre mise à jour
this
devez (bien sûr) détiennent déjà la valeur correcte dans la première place à aucune des méthodes ci-dessus fonctionne.OriginalL'auteur Alnitak