为什么dojo 1.7 不能显示对话框？答案

【问题标题】：Why dojo 1.7 can't show dialog?为什么dojo 1.7 不能显示对话框？
【发布时间】：2011-12-08 05:01:07
【问题描述】：

我关注the dojo tutorial 显示“条款和条件”对话框。 dojo 版本是 1.7.0。我用chrome测试了这个例子。在我的测试页面中，我右键单击以显示菜单，然后选择项目“检查元素”。我在选项卡控制台中发现了一条错误消息。错误信息是：

Uncaught TypeError: Cannot call method 'show' of undefined
showDialogdialog
(anonymous function)
onclickdialog

然后我去dojo api page。我发现dojo 1.7.0 在dijit.Dialog 类下没有任何方法。那么如何显示对话框使用dojo 1.7.0？任何的想法？非常感谢。

【问题讨论】：

标签： javascript dojo

【解决方案1】：

这似乎是 Google CDN 的问题，因为教程示例适用于 Dojo 1.7 的本地副本。

Dojo loader 加载文件 Dialog.js，但无法解析，导致“parser.js: 8 Uncaught Error: Could not load class 'dijit.Dialog'”。

dijit.Dialog.show() 方法丢失，因为 Dialog 小部件未实例化并且 dijit.byId("terms") 返回“未定义”。

要通过脚本标签解决此加载 dijit.Dialog 类/文件：

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.0/dijit/Dialog.js"></script>

我将此问题填入 Dojo 错误跟踪器：Ticket #14415。

【讨论】：

【解决方案2】：

从错误消息来看，对话框对象是undefined。您仍然使用show 函数来显示dijit.Dialog。仔细检查dijit.Dialog实例是否创建成功。

示例代码：

var dlg = new dijit.Dialog({
    id: "myDialog",
    title: "Sample",
    content: "<div>Hello World!</div>"
});
dlg.show();

在api文档中看不到show函数是因为这个show函数实际上是在一个内部类dijit._DialogBase中声明的。

【讨论】：

似乎 API 工具应该拾取继承的方法（并在绿色的“in”按钮打开时显示它们。听起来像是另一个错误，可能与 AMD 过渡有关

【解决方案3】：

我尝试过 dojo 1.7.1，它可以使用此代码 http://jsfiddle.net/nv4YC/ dojo 1.7.0 也可以使用。

From your link (the dojo tutorial) 它必须改变

dojo.require("dijit.Dialog");

并且在脚本标签处应该有 async: true

像这样 data-dojo-config="async: true, parseOnLoad:true"

让我们看看我的 jsfiddle 或试试这段代码

<head>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css">
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js"
    data-dojo-config="async: true, parseOnLoad:true"></script>
    <script>
        require(["dijit/registry", "dijit/Dialog"], function (registry)
        {
            // Show the dialog
            showDialog = function showDialog()
            {
                registry.byId("terms").show();
            }
            // Hide the dialog
            hideDialog = function hideDialog()
            {
                registry.byId("terms").hide();
            }
        });
    </script>
</head>

<body class="claro">
    <button onclick="showDialog();">View Terms and Conditions</button>
    <div class="dijitHidden">
        <div data-dojo-type="dijit.Dialog" style="width:600px;" data-dojo-props="title:'Terms and Conditions'"
        id="terms">
            <p>
                <strong>Please agree to the following terms and conditions:</strong>
            </p>
            <div style="height:160px;overflow-y:scroll;border:1px solid #769dc4;padding:0 10px;width:600px">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed suscipit
                    massa. Aenean vel turpis tincidunt velit gravida venenatis. In iaculis
                    urna non quam tincidunt elementum. Nunc pellentesque aliquam dui, ac facilisis
                    massa sollicitudin et. Donec tincidunt vulputate ultrices. Duis eu risus
                    ut ipsum auctor scelerisque non quis ante. Nam tempor lobortis justo, et
                    rhoncus mauris cursus et. Mauris auctor congue lectus auctor ultrices.
                    Aenean quis feugiat purus. Cras ornare vehicula tempus. Nunc placerat,
                    lorem adipiscing condimentum sagittis, augue velit ornare odio, eget semper
                    risus est et erat....</p>
            </div>
            <button onclick="hideDialog();">I Agree</button>
            <button onclick="alert('You must agree!');">I Don't Agree</button>
        </div>
    </div>
</body>

【讨论】：