带有模板的 Dojo 小部件，在小部件加载时更改模板（添加 DOM 元素）答案

【问题标题】：Dojo widget with template, change template on widget load (add DOM element)带有模板的 Dojo 小部件，在小部件加载时更改模板（添加 DOM 元素）
【发布时间】：2013-04-16 13:41:46
【问题描述】：

我想用一个非常简单的 html 模板创建一个 dojo 小部件：

<div id="contentExternal"></div>

然后在小部件加载时，我想从外部服务加载某些 url。然后在加载 url 后，我想放置一个与加载的 url 相等的 with src 参数。我写过：

dojo.provide("dojoModules.ExternalWebsitePane");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dojoModules.ConfigurationPane");

dojo.declare("dojoModules.ExternalWebsitePane", [dijit._Widget, dijit._Templated],
    {
        templateString: dojo.cache("dojoModules", "templates/ExternalWebsitePane.html"),
        widgetsInTemplate: false,
        constructor: function() {
        }
        ,
        startup: function() {
            //Get Config
            var serviceParams = new Object();
            serviceParams.ServiceType = "GetConfig";
            ecm.model.Request.invokePluginService("ExternalWebsitePlugin", "ExternalWebsiteService",
                    {requestParams: serviceParams, requestCompleteCallback: function(response) {
                            iframe = new Object();
                            iframe.src = response.configuration.value;
                            iframe.class = "iframe1";
                            var content = document.getElementById('contentExternal');
                            content.appendChild(iframe);
                        }});

        }

    });

但代码执行失败

var content = document.getElementById('contentExternal');
content.appendChild(iframe);

它说内容为空。我怀疑来自 html 模板的 div 尚未加载。我应该如何添加元素？还是什么时候？

【问题讨论】：

标签： javascript dom dojo widget

【解决方案1】：

通常，当您有模板化的小部件时，您应该使用 Dojo 附加点。如果您有以下模板（例如）：

<div data-dojo-attach-point="contentExternalNode"></div>

然后，您可以从与附加点同名的属性访问该节点，例如：

this.contentExternalNode.appendChild(iframe);

我通常在小部件的postCreate 中做这些事情（我不知道它是否已经在startup 可用）。有一篇关于编写自己的小部件的文章（以及有关模板小部件的更多信息）here。

注意：如果您使用 Dojo 1.6，您需要使用 dojoAttachPoint 属性，而不是 data-dojo-attach-point。

【讨论】：