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

Question

我想在 JQuery sortable 的停止事件触发时更改 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

您可以使用 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();
    }

}

将 this 设置为变量是 JavaScript 解决方案，而不是 typescript 方式。

希望对你有所帮助。

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

Updated component variable in JQuery sortable stop event

jquery

jquery-ui-sortable

angular