Aktualisierte Komponentenvariable in JQuery Sortierbar Stopp-Ereignis

Question

Ich möchte die IsMyPresentationEmpty Variable ändern, wenn das Stop-Ereignis von JQuery Sortierbar ausgelöst wird. Leider ist die Variable 'this' in diesem Bereich nicht definiert. Wissen Sie, wie ich aus diesem Bereich auf die Variable zugreifen kann?

Vielen Dank im Voraus!

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

Sie können binden „diese“ auf eine Variable (var selbst in diesem Beispiel), die außerhalb Ihrer Veranstaltungen und dann diese Variable in den Ereignissen verwenden. Zum Beispiel:

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

können Sie die arrow-functions von Typoskript verwenden, die nicht die dies ändern.

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(); 
    } 

} 

Setzen Sie dies in eine Variable ist eine JavaScript-Lösung und nicht die Typoskript Weg.

Ich hoffe, das hat dir geholfen.