javascript - 向 dijit 对话框添加内容

Question

我查看了很多尝试添加内容/更改 Dojo 对话模板的链接。 This was the most promising.

但是，每当我做这样的事情时:

在 HTML 中声明的对话框:

<div class="djDialog" id="dgViewer" data-dojo-type="TemplatedDialog" data-dojo-props="title: 'My Dialog', draggable:false"></div>

对话框模板:

<div class="dijitDialog" role="dialog" aria-labelledby="${id}_title">
    <div data-dojo-attach-point="titleBar" class="dijitDialogTitleBar">
        <span data-dojo-attach-point="titleNode" class="dijitDialogTitle" id="${id}_title"></span>
        <span data-dojo-attach-point="closeButtonNode" class="dijitDialogCloseIcon" data-dojo-attach-event="ondijitclick: onCancel" title="${buttonCancel}" role="button" tabIndex="-1">
            <span data-dojo-attach-point="closeText" class="closeText" title="${buttonCancel}">x</span>
        </span>
    </div>
    <!-- containerNode from original Dialog template -->
    <div data-dojo-attach-point="containerNode" class="dijitDialogPaneContent">
        <!-- All "custom" content -->
        <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'" style="height:300px">
            <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">

            </div>
            <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
                <button data-dojo-type="dijit.form.Button">Edit</button>
                <button data-dojo-type="dijit.form.Button">Status</button>
            </div>
        </div>
        <!-- End "custom" content -->
    </div>
</div>

自定义对话框类:

define([
    'dojo/_base/declare',
    'dijit/Dialog', 
    'dijit/_TemplatedMixin',
    'dojo/text!./dialog_templates/View.html'], 
    function(
        declare, 
        Dialog, 
        _Mixin,
        _template){
    return declare('TemplatedDialog', [Dialog, _Mixin], {    
        templateString : _template,
        constructor : function(){

        }
    })
})

在我的控制台(使用 Chrome)中，我只看到:

<div data-dojo-attach-point="containerNode" class="dijitDialogPaneContent" style="width: auto; height: auto; "></div>

...和内容应该所在的空节点。

到目前为止，我还没有发现任何人似乎已经成功地在模板方面扩展了 dijit.Dialog。这可能吗？

编辑

在此模板上尝试了一些变体之后:

<div class="dijitDialog" role="dialog" aria-labelledby="${id}_title">
    <div data-dojo-attach-point="titleBar" class="dijitDialogTitleBar">
        <span data-dojo-attach-point="titleNode" class="dijitDialogTitle" id="${id}_title"></span>
        <span data-dojo-attach-point="closeButtonNode" class="dijitDialogCloseIcon" data-dojo-attach-event="ondijitclick: onCancel" title="${buttonCancel}" role="button" tabIndex="-1">
            <span data-dojo-attach-point="closeText" class="closeText" title="${buttonCancel}">x</span>
        </span>
    </div>
    <!-- containerNode from original Dialog template -->
    <div class="dijitDialogPaneContent">
        <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'" style="height:100%;width:100%">
            <div data-dojo-attach-point="containerNode" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"></div>
        </div>
        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
            <button data-dojo-type="dijit.form.Button">Edit</button>
        </div>
    </div>
</div>

正在抛出错误 Uncaught TypeError: Cannot read property '0' of undefined。这就是堆栈，如果有帮助的话。我正在使用来自 Google CDN 的未压缩版本来帮助调试。

_childElements          dojo.js.uncompressed.js:8341
getStepQueryFunc        dojo.js.uncompressed.js:8597
query                   dojo.js.uncompressed.js:9005
query                   dojo.js.uncompressed.js:5248
_2._checkIfSingleChild  _ContentPaneResizeMixin.js:2
_4._size                Dialog.js:2
_4.show                 Dialog.js:2

从 containerNode 中删除 data-dojo-type 和 -props 解决了这个问题，但它仍然没有让事情更接近于拥有一个工作自定义模板化对话框。

Answer 1

在内容 Pane 上进行模板化时遇到麻烦的原因是，无论您将模板内容放入由附加点 'containerNode' 引用的 domNode 中，您都将在启动时丢失。

如果没有设置 'href' 和 'content' 属性，它们将简单地设置为空字符串，从而留下 Dialog.containerNode.innerHTML == ""

您无需从 _TemplatedMixin 派生，因为对话框本身就是一个模板化的小部件。而是将其更改为 _WidgetsInTemplateMixin 以补偿 BorderContainer 布局小部件和您的 dijit.form 内容。此外，自定义模板中的标记应该是预先要求的，因此您可以在此处使用类似的内容:

将容器的旧附加点模板更改为此

<div data-dojo-attach-point="containerNode" 
     data-dojo-type="dijit.layout.ContentPane"
     data-dojo-props="region:'center'">

然后向模板中的标记小部件添加要求加上 _WidgetsInTemplateMixin:

define(["dijit/Dialog",
    "dijit/_WidgetsInTemplateMixin",
    "dojo/text!./dialog_templates/View.html",
    // rest are for rendering example
    "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane",
    "dijit/form/Button"
}. ... );

结果应该是这样的，记住你的模板 View.html 的变化:

define([
    'dojo/_base/declare',
    'dijit/Dialog', 
    "dijit/_WidgetsInTemplateMixin",
    "dojo/text!./dialog_templates/View.html",
        // rest are for rendering example
    "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane",
    "dijit/form/Button"], 
    function(
        declare, 
        Dialog, 
        _Mixin,
        _template){
    return declare('TemplatedDialog', [Dialog, _Mixin /*careful, widgetsintemplate is tricky*/ ], {    
        templateString : _template
    })
})

您可以 fiddle here

编辑:

由于包含边框布局的对话框存在问题(无论如何也不是闻所未闻)，这里有一个解决方法:

    _checkIfSingleChild: function() {
        delete this._singleChild;
       domClass.toggle(this.containerNode, this.baseClass + "SingleChild", !!this._singleChild);

    },
    templateString: '....'

我不确定后果，我认为如果您尝试以编程方式更改其内容和尺寸，您的边界布局可能会开始出现异常。但它会呈现 - 至少它在这里:updated fiddle