如何设计通用 jquery ui 对话框视图 (backbonejs)

Question

我有一个要求，我需要一个通用的 Backbone View，它将包含在 jquery UI 对话框中。该视图应提供以下功能：

1. 可以从任何其他视图调用。
2. 对话框视图输入字段值应传递回调用视图。
3. 可以调用另一个视图（又是一个 jquery 对话框）并隐藏自身。当在新视图上单击“提交/确定”时，将再次显示先前的对话框。 （这里新对话框也会向调用对话框提供一些信息）

对于 1]，我在每个必须调用对话框的视图中放置一个空 div。但这不是通用的。

对于2]当前我从对话框视图中设置了调用视图的某些字段。我对这个实现并不满意，因为： a] 我们正在从 diff 视图访问另一个视图元素，并且 b] 当多个视图调用对话框视图时，这会变得复杂。由于我需要一个标志来告诉我哪个视图称为此对话框视图，因此我可以设置其元素值。 在这种情况下，是否有更好的方法将信息从一个视图传递到另一个视图？

对于3]我还没有想出一个好的设计。

提前致谢。

Answer 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");
    },