Question

我目前正在尝试学习OO Javascript，因此我可以编写一些更清晰的代码。在我的下面的代码中，我使用的是JQuery UI Dialog对象和我自己的类，因此我可以轻松初始化大量的Dialog。

问题是函数没有返回对话框对象，所以我无法从中访问方法和属性。

  /*
*  Load AddTaskForm dialog
*/
$('#AddTask').click(function ()
{
    /* Ajax request to load form into it */
    $.ajax({
        type: 'Get',
        url: '/Planner/Planner/LoadAddTaskForm',
        dataType: 'html',
        success: function (AddTaskForm)
        {
            var d = new AddDialog();
            var result = d.Dialog();

              /* AddTaskDialog.html(AddTaskForm);
            AddTaskDialog.dialog('open');*/
        }
    });
});



function AddDialog()
{
    this.Dialog = function()
    {
        $('<div></div>').dialog(
        {
            width: 580,
            height: 410,
            resizable: false,
            modal: true,
            autoOpen: false,
            title: 'Basic Dialog',
            buttons:
                {
                    Cancel: function ()
                    {
                        $(this).dialog('close');
                    },
                    'Create Task': function ()
                    {

                    }
                },
                close: function ()
                {
                    $(this).dialog('destroy').remove();
                }
        });
    } 
}

**更新了代码

  /*
*  Load AddTaskForm dialog
*/
$('#AddTask').click(function ()
{
    /* Ajax request to load form into it */
    $.ajax({
        type: 'Get',
        url: '/Planner/Planner/LoadAddTaskForm',
        dataType: 'html',
        success: function (AddTaskForm)
        {
            var AddTaskDialog = $('<div></div>');
            AddTaskDialog.dialog(AddTaskDialogOptions);
            AddTaskDialog.html(AddTaskForm);
            AddTaskDialog.dialog('open');
        }
    });
});


/*
*  Add task dialog default options
*/
var AddTaskDialogOptions = {
    width: 580,
    height: 410,
    resizable: false,
    modal: true,
    autoOpen: false,
    title: 'Basic Dialog',
    buttons:
        {
            Cancel: function ()
            {
                $(this).dialog('close');
            },
            'Create Task': function ()
            {

            }
        },
    close: function ()
    {
        $(this).dialog('destroy').remove();
    }
}

这有效

 /*
*  Load AddTaskForm dialog
*/
$('#AddTask').click(function ()
{
    var addTaskDialog = $('<div></div>');
    addTaskDialog.dialog(AddTaskDialogOptions);
    addTaskDialog.html('wowowo');
    addTaskDialog.dialog('open');  
});

这不起作用

 /* Ajax request to load form into it */
    $.ajax({
        type: 'Get',
        url: '/Planner/Planner/LoadAddTaskForm',
        dataType: 'html',
        success: function (AddTaskForm)
        {
            var addTaskDialog = $('<div></div>');
            addTaskDialog.dialog(AddTaskDialogOptions);
            addTaskDialog.html(AddTaskForm);
            addTaskDialog.dialog('open');  
        }
    });

Answer 1

这是因为你没有“返回”任何对话，而是一个函数......

顺便说一句这种编码就是一切，但不干净！该对话框已经是一个类，它已经是一个对象。和jQuery一样。你不需要将它包装成一个函数，然后再包含在另一个类中。

jQuery ui对话框是一个jquery ui小部件。这意味着，您可以使用$("something").dialog("widget")轻松访问它，并获得对话框的实例。

如果你想匿名但可以访问，你应该这样做。

var myDialogMarkup = $("<div></div>").dialog();

如果您想要它，请执行myDialogMarkup.dialog("widget")或myDialog.dialog("methodtodo")

如果您想要始终使用相同的对话框，只需执行此操作

var myDialogDefaultVars = {
            width: 580,
            height: 410,
            resizable: false,
            modal: true,
            autoOpen: false,
            title: 'Basic Dialog',
            buttons:
                {
                    Cancel: function ()
                    {
                        $(this).dialog('close');
                    },
                    'Create Task': function ()
                    {

                    }
                },
                close: function ()
                {
                    $(this).dialog('destroy').remove();
                }
        }

然后

$("<div></div>").dialog(myDialogDefaultVars);

<强>更新

如果你坚持做你的风格

function AddDialog()
{
    this.Dialog = function()
    {
         return $('<div></div>').dialog(
        { ... });
    }
}

只是“返回”它：）

或者如果您只想返回组件

function AddDialog()
{
    this.Dialog = function()
    {
         return $('<div></div>').dialog(
        { ... }).dialog("widget");
    }
}

对话框（“小部件”）将为您提供小部件组件。然后你可以做

var d = new AddDialog();
d.Dialog().close();

Answer 2

当我们使用jQuery时，我们遵循一些基本规则。

var AddTaskDialog = $('<div></div>');
            AddTaskDialog.dialog(AddTaskDialogOptions);
            AddTaskDialog.html(AddTaskForm);
            AddTaskDialog.dialog('open');

你不这样做。相反，你这样做。

var $dialog = $("<div></div>")
             .append(AddTaskForm)
             .dialog(AddTaskDialogOptions)
             .dialog("open");

如何从函数返回初始化的对话框对象？

2 个答案: