一般的なjquery UIダイアログ・ビューを設計する（backbonejs）

Question

jquery UIダイアログに囲まれたジェネリック・バックボーン・ビューが必要な場合があります。このビューは、次の機能を提供する必要があります。

1. 他のビューから呼び出すことができます。
2. ダイアログビューの入力フィールド値は、呼び出し元のビューに戻す必要があります。
3. もう1つのビュー（jqueryダイアログ）を呼び出して、それ自体を非表示にすることができます。新しいビューでSubmit/OKをクリックすると、直前のダイアログが再び表示されます。 （ここでも新しいダイアログは呼び出しダイアログに情報を与えます）

1]ダイアログを呼び出す各ビューに空のdivを入れています。しかし、これは一般的ではありません。

[2]現在、私はダイアログビューから呼び出しビューのフィールドを設定しています。この実装に満足していません： a] diffビューから別のビュー要素にアクセスしています。 b]複数のビューがダイアログビューを呼び出すときに複雑になります。私はこのビューをどのビューから呼び出すかを示すフラグが必要なので、その要素の値を設定できます。 このようなシナリオでは、の情報をあるビューから別のビューに渡す方が良いでしょうか？

[3]私はまだ良いデザインを思いついていません。

ありがとうございます。

Answer 1

私はこれがあなたが探しているとは思わないが、ここで私のハックだ。私自身のプロジェクトの1つで動作し、間違いなく改善することができます。 "#addQuizDialog"はDOMの空のdivです。私はそれを他のコードのどこかで削除するので、私はそれをクローンします。 divを動的に追加することもオプションですが、私はこの時点で私が覚えていない他の問題を作りました。

addQuizDialog: function(){ 
     console.log("_QuizListView addQuizDialog called") 
     var self = this; 
     $("#addQuizDialog").clone().load("/templates/addQuizDialog.jade").dialog({ 
     autoOpen: false, 
     title: "Create New Quiz", 
     draggable: false, 
     modal: true, 
     resizable: false, 
     buttons: [ 
      { 
      text: "Save", 
      click: function() { 
       // create a Quiz model 
       var display = $(this).find("form input[name=display]").val(); 
       var description = $(this).find("form input[name=description]").val(); 
       var dialog = this; 
       // check for existing model by this display name 
       $.get('/document/quiz/search',{"display":display},function(data, textStatus, jqXHR){ 
       if (data.exists === true){ 
        if ($("#addQuizDialog p.ui-state-error").length > 0){ 
        // do nothing 
        } else { 
        $("#addQuizDialog p").append("<br><p class='ui-state-error'>A quiz by that name already exists!</p>") 
        } 
        return false; 
       } 
       self.collection.create({"display":display,"description":description}); 
       $(dialog).dialog("close"); 
       }); 
      } 
      }, 
      { 
      text: "Cancel", 
      click: function() { 
       $(this).dialog("close"); 
      } 
      } 
     ], 
     beforeClose: function(event, ui) { 
      console.log("beforeClose called"); 
      $(this).remove(); 
      return true; 
      }, 
     },self).dialog("open"); 
    },