javascript - 扩展Dialog时"this.domNode is null"

Question

我正在尝试使用与 Dialog 相同的 templateString 设置自定义对话框，但添加 <div><div data-dojo-type="dijit/layout/ContentPane">Custom</div></div>进入内容区域。

require([
    "dojo/_base/declare",
    "dojo/_base/lang",
    "dojo/dom-construct",
    "dijit/_WidgetsInTemplateMixin",
    "dijit/Dialog"
], function (declare, lang, domConstruct, _WidgetsInTemplateMixin, Dialog) {
    var CustomDialog = declare([Dialog, _WidgetsInTemplateMixin], {
        templateString: 
            '<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"'+
                              'role="heading" level="1"></span>'+
                    '<span data-dojo-attach-point="closeButtonNode" class="dijitDialogCloseIcon" data-dojo-attach-event="ondijitclick: onCancel"'+
                        'title="${buttonCancel}" role="button" tabindex="0">'+
                        '<span data-dojo-attach-point="closeText" class="closeText"'+ 'title="${buttonCancel}">x</span>'+
                    '</span>'+
                '</div>'+
               ' <div data-dojo-attach-point="containerNode" class="dijitDialogPaneContent">'+
                    '<div><div data-dojo-type="dijit/layout/ContentPane">Custom</div></div>'+
                '</div>'+
            '</div>' ,
        constructor: function (args, srcNodeRef) {
            lang.mixin(this, args);
        },
    });  

    var div = domConstruct.toDom("<div id='saveMapWidget'></div>");
    domConstruct.place(div, document.body);    
    var widget = new CustomDialog({}, div);
    widget.startup();
    widget.show();
});

Here's the JSFiddle

运行这段代码给我 TypeError: this.domNode is null

正在删除_WidgetsInTemplateMixin使其能够正常工作。为什么模板小部件会导致此问题？

Answer 1

我已经编辑了我的回复，因为虽然我原来的回复是有效的，但正如 Shoe 指出的那样，这并不是导致问题的原因。对此感到抱歉。

我已经更仔细地追踪了这一点。发生的情况是，您的内部 ContentPane 实际上在对话框启动之前就被销毁了，然后当它确实尝试启动时，它会尝试启动已经销毁的内容内容 Pane 。但是，被销毁的小部件的 domNode 引用无效，并且 ContentPane 在其 startup 功能期间间接查看 domNode.parentNode ，这会导致错误。

IIUC，小部件首先被过早销毁的原因是因为您的对话框在 buildRendering 期间解析模板中的小部件，然后在 buildRendering 之后立即解析_applyAttributes，Dialog 的 content setter 最终会使用最初解析的内容进行调用，这最终会破坏最初解析的内容。实际上，您通过尝试在此处使用 _WidgetsInTemplateMixin 进行了双重解析。如果您在 containerNode(这是 ContentPane 专门解析的节点)之外的某个位置呈现小部件，那么您可能不会遇到此问题。

FWIW，当我需要在对话框中放置自定义小部件时，我不喜欢摆弄整个对话框的模板，因此我采取相反的方法 - 我开发自定义小部件，然后只需设置对话框的content 到该自定义小部件的实例。这可能是您可以尝试的更直接的方法。

以下是小部件即内容方法的示例:http://jsfiddle.net/ddLp24wg/

原始回复

您在对话框实际位于文档流内之前调用 startup，并且子窗口小部件之一不希望出现这种情况。小部件的 startup 方法只能在小部件的 DOM 处于文档流中时调用，因为 startup 是创建生命周期中可以执行维度敏感逻辑的唯一 API。

对于对话框，无论如何，第一次调用 show 时都会自动调用 startup (因为预计在此之前它不会进入流程)，所以你根本不需要自己调用它。

此外，我不确定您到目前为止是否只进行了测试，但如果您扩展模板以添加 ContentPane，那就太过分了 - Dialog一开始就已经扩展了 ContentPane，因此您基本上已经有了一个。