どのように関数から初期化されたダイアログオブジェクトを返すことができますか？

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

これは、あなたが "リターン" いずれかのダイアログがいけないので、これは

/* 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

That's動作しない

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

の作品、しかし機能...

btwこの種のコーディングはすべてですが、クリーンではありません！ ダイアログは既にクラスであり、すでにオブジェクトです。 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"); 
    } 
} 

]ダイアログを行うことを主張する場合（ "widget"）はあなたにウィジェットコンポーネントを与えます。 そして、あなたは私たちがjQueryのを使用する場合、我々はいくつかの基本的なルールに従って

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

Answer 2

行うことができます。

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

はこのようには機能しません。代わりにこれを行います。

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