如何以编程方式添加和使用元素(在这种情况下为对话框) [英] How to programatically add and use elements (dialog box in this case)

问题描述

所以我的第一个想法是，添加更多和更多的HTML元素不是走的路，我想出了这个解决方案

So My first though was, that adding more, and more HTML elements is not a way to go, and I come up with this solution

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

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

It's working.. To some degree at least. Dialog open, but no styles are appiled. But moreover I can't close dialog. Question Is how to make it working ?

推荐答案

在将div放入体内之后，Dojo需要解析HTML以注意"新的小部件.当它注意到 data-dojo-type 属性时，它说:嘿，这是一个小部件，我需要将其变成漂亮的对话框".

After you have placed the div in your body, Dojo needs to parse the HTML to "notice" the new widget. When it notices the data-dojo-type attribute it says "Hey, here's a widget, I need to make this into a beautiful Dialog".

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

当然，您还必须确保您的body标签具有 class ="claro" (或您要使用的任何其他主题).

Of course, you also have to make sure your body tag has class="claro" (or any other theme you want to use).

话虽如此，我个人认为这是制作对话框的一种混乱方式.您有点在将声明式与程序性混合.我不确定您所说的"我的第一个意思是，添加更多和更多的HTML元素不是一种方法"，但是我个人认为将HTML混入您的javascript中会使代码难以阅读.您可能要看一下

That being said, I personally think this is a little messy way to make a dialog box. You are sort of mixing declarative with programmatic. I'm not sure what you mean by "My first though was, that adding more, and more HTML elements is not a way to go", but in my own opinion mixing HTML inside your javascript makes the code difficult to read. You may want to take a look at this sitepen article if you want a clean way to separate HTML and Javascript.

这篇关于如何以编程方式添加和使用元素(在这种情况下为对话框)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！