jQuery 通用代码

Question

我在应用程序中使用 jQuery 模式对话框来处理正常的 CRUD 操作。在某些情况下，我什至打开了两个堆叠模式对话框。

然后，我在外部 javascript 文件中创建了两个通用函数，分别处理 CRUD 表单的显示和提交。

为了显示模式对话框，我调用以下函数。

function _loadDialog(level, action, id, title, onCloseHandler) {
    var panel = panels[level];
    $(panel).dialog("option", "title", title);
    var url = action;
    if (id != "") url = url + "/" + id;
    $.ajax({
        type: "get",
        dataType: "html",
        url: url,
        data: {},
        success: function(response) {
            $(panel).html('').html(response).dialog('open');
        }
    });
    $(panel).unbind("dialogclose").bind("dialogclose", function(event, ui) {
        if (onCloseHandler != null) {
            onCloseHandler();
        }
    });
}

该函数接收一个 level 参数，该参数指示该函数如何堆叠对话框以及在哪里放置从 ajax 调用返回的渲染的部分标记。这个功能运行良好。

在 ajax 调用返回的部分视图内有输入，最后是以下代码

<div style="text-align:right;">
    <input type="submit" id="btnSave" value="Salva" />
</div>

，对于 jQuery 部分，例如，

$("#contactForm").submit(function(event) {
    _submitForm(1, event, "#contactForm", "post", "html", '<%= Url.Content("~/Contact/Save") %>');
});

如您所见，提交函数具有以下签名

function _submitForm(level, event, formName, atype, adataType, aurl) {
}

，它处理

• 表单提交到正确的控制器操作
• 用户反馈（例如“操作执行成功”）
• 对话框关闭操作

需要级别参数来将所有功能（包括关闭对话框）寻址到所使用的正确 DIV 面板。

我希望能够有时将同一对话框显示为对话框，有时显示为子对话框。
为了能够做到这一点，我的意思是“从逻辑上讲”，因为我对 javascript 和 jQuery 不太熟悉，我需要进行以下更改：

• 修改 _loadDialog 函数以保存 level 参数
• 修改 _submitForm 函数并使其使用之前从 _loadDialog 函数保存的正确 level 参数。

我怎样才能实现这个目标？

Answer 1

我对什么在哪里、什么时间有点困惑，但似乎你想将一些信息与特定元素相关联。

为此，您可以使用 jQuery 的 .data() 方法。它将把您想要的任何数据与特定元素关联起来。

不确定在您的情况下应该如何使用它，但这里有一个通用示例：

$('#someSelector').data('level', 3);

现在，ID 为 someSelector 的元素将把数字 3 映射到其 其关联数据中的“level”属性。

因此，要检索它，您可以这样做：

$('#someSelector').data('level'); // returns 3

当销毁具有与其关联的数据的元素时（这只是此类数据的一个示例），您应该确保使用 .remove() 或 < code>.empty() 或自动或手动删除数据的其他方法之一。

Answer 2

听起来您所需要的只是在调用它时将您已经获得的 level 参数传递给 _submitForm 函数。

function _loadDialog(level, action, id, title, onCloseHandler) {
    var form = $('<form ...></form>');
    // ... Generates the form markup

    form.submit(function() {
        _submitForm(level, ...);
    });
}

虽然我显然跳过了我不知道您的实现的所有细节，但关键是无论传递到 _loadDialog 的 level 稍后都会传递到 < code>_submitForm 被调用时。

在 JavaScript 中，调用 _loadDialog 的同时不调用 _submitForm 并不重要。通过所谓的“闭包”（JavaScript 程序员喜欢谈论的东西），level 变量被安全地保存在 form.submit() 的匿名回调函数中，并且将当最终调用该函数时，仍然可以使用相同的值。