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解决方案，而不是打字稿方式。

我希望这对你有所帮助。