2013-03-27 16 views
10

Bazı javascript kodlarını yazı tipine yerleştiriyorum ve bir sorunla karşılaştım.Typescript + Jquery Ajax + this

function SomeAjaxService 
{ 
    var self = this; 

    self.CheckErrorType = function(...) { 
     // Do something 
    }; 

    var SuccessProxyCallback = function(results) { 
     // Do some stuff with results, like send off some events 
     this.successCallback(results); 
    }; 

    var FailureProxyCallback = function(...) { 
     // Do some stuff with errors, and fire some events 
     var someErrorType = self.CheckErrorType(...); 
     this.failureCallback(someErrorType);   
    }; 

    self.SendRequest = function(requestArgs) { 
     var ajaxSettings = { 
      context: requestArgs, 
      // Assign a load of stuff 
     }; 

     $.ajax(ajaxSettings); 
    }; 
} 
:

Ben bağlam olarak bir nesneyi geçirmeden bir ajax arama var, bu nesne, bazı geri aramalar ve başarı çağırma kanalize edilmesi gerektiği belirten başarılı veya hata geri aramaları tarafından okunan diğer bazı bilgileri içerir

Artık hata vekilini gördüğünüz gibi, "bu" bağlam nesnesini kullanmanın yanı sıra yerel bir yöntemi de çağırır. Öyleyse bu tür senaryoyu yazı tipleri ile nasıl halledebilirsiniz?

Kurucuya self = this'u ayarlayabilir ve daha önce olduğu gibi devam edebilir misiniz?

== DÜZENLEME ==

burada istenen nedeniyle eksik kendini değişkene 2 şey olması gerek bu sorunu gösteren yukarıdaki bir sınıf temsilidir gibi

.

class SomeAjaxService 
{ 
    public CheckErrorType(someArg1: any, someArg2: any) { 
     // Do some stuff with data 
    }; 

    private SuccessProxyCallback(results: any) { 
     // Do some stuff with results, like send off some events 
     this.successCallback(results); 

     // Does the above *THIS* usage point to the context of the 
     // Ajax call or the actual instantiated class 
    }; 

    private FailureProxyCallback(...) { 
     // Do some stuff with errors, and fire some events 
     var someErrorType = this.CheckErrorType(...); 

     // The above *THIS* call cannot be correct if the context has overwritten 
     // the scope of this, however I dont know if this is true, do I even need 
     // this.CheckErrorType to invoke a local method? 

     this.failureCallback(someErrorType);   

     // As mentioned above same issue here but the *THIS* should hopefully 
     // point to the context object on the ajax object not the local instance. 
    }; 

    public SendRequest(requestArgs: any) { 
     var ajaxSettings : JqueryAjaxSettings = { 
      context: requestArgs, 
      // Assign a load of stuff 
     }; 

     $.ajax(ajaxSettings); 
    }; 
} 

Ben ana konuya yukarıda dediğimiz gibi

bir yöntemde örnekleri yöntemlerden birini çağırmak yanı sıra ajax çağrısından bağlam nesne üzerinde bir yöntem çağırmak için ihtiyaç vardır. Ham javascript ile self = this olurdu ve o zaman ben ajax async state nesnesini kapsamda tutmak için gerekli olan this geçersiz kılınabilir.

+0

Bu kodun typescript derleme tam olarak bu kod kendisi, yani ne gerçekten burada var bir JavaScript soru ise:

İşte bunu yapmak için tek yoldur. Yoksa bunu bir sınıfa dönüştürmeye mi çalışıyorsunuz (eğer öyleyse, şu ana kadar ne yapıyorsunuz)? –

+0

Bu, orijinal javascript, bu benim sahip olduğum problemi göstermek için alay konusu bir javascript. Eğer yardımcı olamayacaksa, o zaman problemin açık olamayacağını düşündüğümde, bir tür yazı tipiyle güncelleştireceğim. – Grofit

+0

Bu yardımcı olabilir https://www.youtube.com/watch?v=tvocUcbCupA&hd=1 – basarat

cevap

7

Kendinizi = bu yapıcıya ayarlayabilir ve daha önce olduğu gibi devam edebilir misiniz?

Özetle, bunu yapmadan yapıcıda bunu yapmak genellikle hiçbir şeyi çözemez (daha sonra bu yöntemde yakalamadığınız sürece - aşağıya bakın). TypeScript sınıfları, yerlileri yakalamak yerine nesne örneğini nesnenin kendisi üzerinde depolar. self, this nesnesinde depolanacağından, daha önce sahip olmadığınız hiçbir şeye sahip olmamanız gerekir.

class SomeAjaxService 
{ 
    private FailureProxyCallback(context, arg) { 
     // now 'this' is the class instance and 'context' is requestArgs 
    } 

    public SendRequest(requestArgs) { 
     var self = this; // Note: captured local used in closure below 
     var ajaxSettings = { 
      context: requestArgs, 
      // Do not use an arrow function here, even though it's tempting! 
      error: function(arg) { self.FailureProxyCallback(this, arg) } 
     }; 

     $.ajax(ajaxSettings); 
    }; 
} 
+0

Makul bir çözüm gibi görünüyor, tavsiye için teşekkürler – Grofit

+6

lambda ifadesi (ok işlevi) kullanma sorunu nedir? – Santhos