Question

我希望在JQuery sortable的stop事件触发时更改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

你可以绑定＆＃34;这个＆＃34;到事件之外的变量（本例中为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解决方案，而不是打字稿方式。

我希望这对你有所帮助。

在JQuery可排序停止事件中更新了组件变量

2 个答案: