Question

所以我的第一个问题是，添加更多，更多的HTML元素是不可取的，我想出了这个解决方案

    var Jaxi = {
        CurrentLocation: '/',
        showLoginDialog: function () {
        dojo.place('<div data-dojo-type="dijit.Dialog" style="width:600px;" id="loginDialog"><div id="dialog-content"></div><a href="javascript:Jaxi.CloseDialog()">Close</div>', dojo.body())
            dojo.xhrGet({
                url: "/Account/SingIn?ReturnUrl=" + Jaxi.CurrentLocation,
                load: function (result) {
                    dojo.byId("dialog-content").innerHTML = result;
                }
            });
            dojo.ready(function () {
                dijit.byId("loginDialog").show();
            });
        },
        CloseDialog: function () {
            dijit.byId("loginDialog").hide();
            dojo.destroy("loginDialog");
        }
    };

它的工作......至少在某种程度上。对话框打开，但没有应用任何样式。但此外我无法关闭对话框。问题是如何使其工作？

Answer 1

将div放入体内后，Dojo需要解析HTML以“注意”新窗口小部件。当它注意到data-dojo-type属性时，它说“嘿，这是一个小部件，我需要把它变成一个漂亮的对话框”。

showLoginDialog: function () {
    dojo.place('<div data-dojo-type="dijit.Dialog" ....</div>', dojo.body());
    dojo.parser.parse();
    ....

当然，您还必须确保您的正文标记有class="claro"（或您要使用的任何其他主题）。

话虽如此，我个人认为制作一个对话框有点混乱。你有点混合声明与程序化。我不确定你的意思是“我的第一个就是，添加更多，更多的HTML元素不是一种方法”，但我个人认为在你的javascript中混合HTML会使代码难以阅读。如果您想要一种简洁的方法来分隔HTML和Javascript，您可能需要查看this sitepen article。

1 个答案: