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

您可以將「this」綁定到事件外部的變量（本例中爲var self），然後在事件內部使用該變量。例如：

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

您可以使用打字稿中的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解決方案，而不是打字稿方式。

我希望這對你有所幫助。