javascript - Javascript类模型：从对话框定义调用类函数

Question

我正在使用 John Resig 的类模型（http://ejohn.org/blog/simple-javascript-inheritance/）并且有这个问题：

在下面的课程中，我正在构建一个删除对话框。当按下“是”按钮时，我想执行该handleDeleteItem功能。我该怎么做？我不能使用“this.handleDeleteItem”，因为“this”指的是对话框。

var bItem = Class.extend({
    init: function (type) {
        this.id = type + "-" + getNewId();
    },
    registerDelete: function () {
        var itemId = this.id;

        // Build Delete Dialog
        var deleteDialog = '<div id="' + itemId + '-delete-dialog" title="Delete Item?"><p><br/><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>Are you sure you want to delete this item?</p></div>';

        // Append dialog
        $('#b-main').append(deleteDialog);

        // Confirmation dialog
        $('#' + itemId + '-delete-dialog').dialog({
            buttons : {
                "Yes" : this.handleDeleteItem(),
                "No" : function () {
                    $(this).dialog("close");
                }
            }
        });

        $("#dialog").dialog("open");
    },
    handleDeleteItem: function () {}
});

Answer 1

你做错了。请尝试以下操作：

$('#' + itemId + '-delete-dialog').dialog({
    buttons : {
        "Yes" : this.handleDeleteItem.bind(this),
        "No" : function () {
            $(this).dialog("close");
        }
    }
});

请注意，我替换this.handleDeleteItem()为this.handleDeleteItem.bind(this).

1. 当您这样做时，this.handleDeleteItem()您正在调用this.handleDeleteItem并将其返回值分配为“是”的事件侦听器。
2. 当您这样做时，this.handleDeleteItem.bind(this)您将this.handleDeleteItem自己指定为“是”的事件侦听器。.bind(this)用于确保事件侦听器具有正确的指针this。