Javascript:带参数的动态函数

Question

这有点棘手，但我需要使下面的大代码块通用。

我有许多遵循相同格式的 View :一个充满行的表，其中每行都包含一个删除图标。每个图标都有一个 data-id 属性，它是数据库中该项目的 _id。

我将每个图标上的单击操作连接到打开标准对话框以要求确认的位置。正如您所猜测的，对话框的"is"按钮将有一个 onclick，它使用项目的 _id 参数调用所需的函数。例如，设置 onclick = deleteContact(fdke75jdsgtd7i)

假设我有 3 个表:联系人、案例和公司。

只要我在每个 View 中复制并粘贴以下代码块，我就可以完成所有给定表的接线，但需要注意的是，我必须使用带注释的 onclick 行，而不是下面通用的、未注释的行它。

let deleteItemAnchors = document.getElementsByClassName("delete-item");

Array.from(deleteItemAnchors).forEach( (item) => {

    item.addEventListener('click', () => {

        // Highlight the selected row.
        highlightedTableRow = item.closest("tr");
        highlightedTableRow.classList.add("table-warning");

        // The record's _id is in the data-id attribute.
        let itemId = item.getAttribute("data-id");

        let buttons = [{
            //onclick: () => { removeTableRowHighlight(); deleteContact(itemId); },
            onclick: () => { removeTableRowHighlight(); deleteFunction(itemId); },
            text: "Yes"
        }, {
            onclick: () => { removeTableRowHighlight(); },
            text: "No",
            class: "btn-secondary"
        }];

        let confirmDelete = new CustomDialog("Delete this " + recordType + "?", 'Click "Yes" to delete it.  Press "No" to cancel.', buttons);

    });

});

以下是单击按钮时调用的函数的示例:

function deleteContact(itemId) {
    console.log("You deleted the item with id = " + itemId);
}

请记住，只有当注释的 onclick 行处于事件状态并且其正下方的通用行被注释掉时，它才有效。

我想通过将其移动到可重用函数来停止为每个 View 重新创建大代码块，该函数可以从 3 个 View 中的每个 View 调用，如下所示:

let deleteFunction = () => { deleteContact(); };  
wireDeleteIcons("Contact", deleteFunction);


let deleteFunction = () => { deleteCase(); };
wireDeleteIcons("Case", deleteFunction);

因此，我将代码块移至名为“wireDeleteIcons”的函数，该函数接受:

• 记录类型为字符串，并且
• 执行删除操作的函数，例如deleteCase() 或deleteContact()。

从我的联系人 View 中，我正在调用:

let deleteFunction = () => { deleteContact(); };  
wireDeleteIcons("Contact", deleteFunction);

到目前为止，除了单击图标时的 deleteFunction(itemId) 调用之外，一切正常。

如果您回顾一下大代码块，请查看注释的 onclick 行下面的行。

我正在尝试将参数 itemId 添加到传递的函数中。在测试中，它一直到达我的deleteContact()函数，但它没有传入_id。因此，我的console.log根据我的deleteContact()函数显示，“您删除了 id = undefined 的项目”

如何通用地传递该函数，并从通用的wireDeleteIcons() 函数中将参数插入其中？

Answer 1

您的deleteFunction()需要接受一个参数:

let deleteFunction = (id) => deleteContact(id);

但您实际上并不需要 deleteFunction 变量。只需写:

wireDeleteIcons("Contact", deleteContact);
wireDeleteIcons("Case", deleteCase);

wireDeleteIcons 的定义应该是这样的:

function wireDeleteIcons(tableId, deleteFunction) {
    let deleteItemAnchors = document.getElementById(tableId).getElementsByClassName("delete-item");

    Array.from(deleteItemAnchors).forEach( (item) => {

        item.addEventListener('click', () => {

            // Highlight the selected row.
            highlightedTableRow = item.closest("tr");
            highlightedTableRow.classList.add("table-warning");

            // The record's _id is in the data-id attribute.
            let itemId = this.getAttribute("data-id");

            let buttons = [{
                onclick: () => { removeTableRowHighlight(); deleteFunction(itemId); },
                text: "Yes"
            }, {
                onclick: () => { removeTableRowHighlight(); },
                text: "No",
                class: "btn-secondary"
            }];

            let confirmDelete = new CustomDialog("Delete this " + recordType + "?", 'Click "Yes" to delete it.  Press "No" to cancel.', buttons);

        });

    });
}