Jquery在Ember中弄亂了「this」

Question

我試圖刪除一個特定的ember formset。通常在我的控制器中，這受到控制器的影響，但在jquery腳本之後這個=「p」aragraph。

模板

<p {{bind-attr class=id}}{{action 'getId'}}> Delete</p> 

的Javascript

getId: function(){ 
     $("p").on('click',function() { 
     var Id = $(this).attr('class'); 
     console.log(Id); // Returns id properly . 
     // here this reffers to "p" normally it reffers to the controller. 
     }); 
     this.deleteSpecificFormset(Id); // "Id" is now undefined 
     }, 

    deleteSpecificFormset: function(formCounterID){ 
     var oldPersonFormCount = this.get('personFormCount'); // This as json containing e.g {id:1} 
     var newFormCounter = oldPersonFormCount[formCounterID -1].delete; 
     this.set('personFormCount', newFormCounter); 
    }, 

可以OFC報價燼相關版本與

歡呼聲，

克里斯蒂安

Answer 1

它看起來像一個功能範圍問題。嘗試在外部函數中定義Id，稍後在相同的上下文中可用。

getId: function(){ 
     var Id; //declare the variable outside of the context of the jQuery anonymous function scope 
     $("p").on('click',function() { 
     Id = $(this).attr('class'); 
     console.log(Id); // Returns id properly . 
     // here this reffers to "p" normally it reffers to the controller. 
     )}; 
     this.deleteSpecificFormset(Id); // "Id" should now be defined 
} 

或者，你可以在一個self變量固定外範圍this參考，並從回調內部調用deleteSpecificFormset：

getId: function(){ 
      var self = this; 
      $("p").on('click',function() { 
      var Id = $(this).attr('class'); 
      self.deleteSpecificFormset(Id); 
      )}; 

    }