¿Una o dos instancias de diálogo para agregar y editar?

¿Es mejor crear dos instancias de diálogo, una para agregar y otra para editar, o es posible usar un diálogo?

Ejemplo Esto es lo que estoy usando actualmente

        // 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();
                }
            }
        });

preguntado el 03 de mayo de 12 a las 20:05

Esto puede ser más apropiado para ux.stackexchange.com. Hablas de mostrar ambos cuadros de diálogo al mismo tiempo o mostrar un solo cuadro de diálogo con más información, ¿no es así? -

DRY sería una buena solución, aunque no estoy seguro de si es posible crear una función/objeto en el que pueda agregar #addProgramDialog, Add Program, etc. como parámetros. ¿Quizás alguien más lo sepa? -

Seguramente puede combinar estas dos funciones para la codificación DRY. Simplemente cree algunas variables y en lugar de title: 'Add Program' use title: myVariable , variable que se establece antes de la llamada de diálogo con una declaración condicional. -

1 Respuestas

Según el principio DRY, nunca debes repetirte. En su ejemplo, está duplicando la declaración del ancho, el alto, el parámetro de apertura automática y el botón Cancelar. Puede evitar esto simplemente usando cada método de jQuery para recorrer los cuadros de diálogo y personalizarlos según sea necesario. Como ejemplo:

$('#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);
});

Aquí hay un jsFiddle para mostrar este ejemplo en vivo: http://jsfiddle.net/YTbnN/.

contestado el 04 de mayo de 12 a las 03:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.