jquery - 一个或两个用于添加和编辑的对话框实例？

Question

最好创建两个对话框实例，一个用于添加，一个用于编辑，还是可以使用一个对话框？

示例这是我目前正在使用的

        // Add Dialog 
        $('#addProgramDialog').dialog({
            autoOpen: false,
            width: 400,
            height: 500,
            title: 'Add Program',
            buttons: {
                'Cancel': function () {
                    $(this).dialog('close');
                },
                'Save': function () {
                    saveProgramRequest();
                }
            }
        });


        // Edit Dialog 
        $('#editProgramDialog').dialog({
            autoOpen: false,
            width: 400,
            height: 500,
            title: 'Edit Program',
            buttons: {
                'Cancel': function () {
                    $(this).dialog('close');
                },
                'Update': function () {
                    updateProgramRequest();
                }
            }
        });

Answer 1

根据 DRY 原则，您永远不应该重复自己。在您的示例中，您复制了宽度、高度、autoOpen 参数和取消按钮的声明。您可以通过简单地使用 jQuery 的 each 方法来循环对话框并根据需要进行自定义来防止这种情况。举个例子：

$('#addProgramDialog, #editProgramDialog').each(function(index, node) {
    var options = {
        //autoOpen: false,
        width: 400,
        height: 500,
        buttons: {
            'Cancel': function() {
                $(this).dialog('close');
            }
        }
    };

    if (node.id == "addProgramDialog") {
        options.title = 'Add Program';
        options.buttons['Save'] = function() {
            saveProgramRequest();
        }
    } else {
        options.title = 'Edit Program';
        options.buttons['Update'] = function() {
            updateProgramRequest();
        }
    }

    $(node).dialog(options);
});

这是一个 jsFiddle 来现场展示这个例子 - http://jsfiddle.net/YTbnN/。