JQueryソート可能な終了イベントのコンポーネント変数を更新しました

Question

JQueryソート可能なイベントの停止イベントが発生したときにisMyPresentationEmpty変数を変更したいと思います。残念ながら、 'this'変数はそのスコープでは定義されていません...そのスコープからどのように変数にアクセスできるのか分かりますか？

ありがとうございました！

import { Component, OnInit, ElementRef, Inject } from 'angular2/core'; 

declare var jQuery: any; 

@Component({ 
    selector: 'edit-presentation', 
    templateUrl: 'app/Edit Presentation/edit_presentation.component.html' 
}) 
export class EditPresentationComponent implements OnInit { 
    elementRef: ElementRef; 

    isMyPresentationEmpty = true; 

    constructor(@Inject(ElementRef) elementRef: ElementRef) { 
     this.elementRef = elementRef; 
    } 

    ngOnInit() { 

     // Initialize Sortable on lists 
     var oldList, newList, item; 
     jQuery(this.elementRef.nativeElement).find('.sortable-list').sortable({ 
      start: function(event, ui) { 
       item = ui.item; 
       newList = oldList = ui.item.parent().parent(); 
      }, 
      change: function(event, ui) { 
       if (ui.sender) newList = ui.placeholder.parent().parent(); 

      }, 
      stop: function(event, ui) { 
       // Check for empty list and hide/show instruction text 
       if (jQuery(event.target).has('li').length) { 
        this.isMyPresentationEmpty = false; 
       } else { 
        this.isMyPresentationEmpty = true; 
       } 
      }, 
      connectWith: ".sortable-list" 
     }).disableSelection(); 
    } 

} 

Answer 1

あなたはあなたのイベントの外の変数（この例でのvar自己）に「これを」と結合して、イベント内でその変数を使用することができます。たとえば：

ngOnInit() { 
     var self = this; //use self instead of this if you want to refer to your component inside events 
     // Initialize Sortable on lists 
     var oldList, newList, item; 
     jQuery(this.elementRef.nativeElement).find('.sortable-list').sortable({ 
      start: function(event, ui) { 
       item = ui.item; 
       newList = oldList = ui.item.parent().parent(); 
      }, 
      change: function(event, ui) { 
       if (ui.sender) newList = ui.placeholder.parent().parent(); 

      }, 
      stop: function(event, ui) { 
       // Check for empty list and hide/show instruction text 
       if (jQuery(event.target).has('li').length) { 
        self.isMyPresentationEmpty = false; 
       } else { 
        self.isMyPresentationEmpty = true; 
       } 
      }, 
      connectWith: ".sortable-list" 
     }).disableSelection(); 
    } 

Answer 2

あなたはこれを変更しない、typescriptですからarrow-functionsを使用することができます。

import { Component, OnInit, ElementRef, Inject } from 'angular2/core'; 

declare var jQuery: any; 

@Component({ 
    selector: 'edit-presentation', 
    templateUrl: 'app/Edit Presentation/edit_presentation.component.html' 
}) 
export class EditPresentationComponent implements OnInit { 
    elementRef: ElementRef; 

    isMyPresentationEmpty = true; 

    constructor(@Inject(ElementRef) elementRef: ElementRef) { 
     this.elementRef = elementRef; 
    } 

    ngOnInit() { 

     // Initialize Sortable on lists 
     var oldList, newList, item; 
     jQuery(this.elementRef.nativeElement).find('.sortable-list').sortable({ 
      start: (event, ui) => { 
       item = ui.item; 
       newList = oldList = ui.item.parent().parent(); 
      }, 
      change: (event, ui) => { 
       if (ui.sender) newList = ui.placeholder.parent().parent(); 

      }, 
      stop: (event, ui) => { 
       // Check for empty list and hide/show instruction text 
       if (jQuery(event.target).has('li').length) { 
        this.isMyPresentationEmpty = false; 
       } else { 
        this.isMyPresentationEmpty = true; 
       } 
      }, 
      connectWith: ".sortable-list" 
     }).disableSelection(); 
    } 

} 

これを変数に設定するのはJavaScriptの解決方法であり、typescriptの方法ではありません。

これがあなたを助けてくれることを願っています。