Question

我有一个自定义小部件，用模板扩展 _WidgetBase，_TemplatedMixin

<div dojoAttachPoint="widget">
 <div dojoAttachPoint="title">${name}</div>
 <div dojoAttachPoint="dnmschart"></div>
</div>

和另一个小部件，它在小部件上方展开

require([
'dojo/_base/declare',
'my/widget/view/AbstractWidget'
], function (declare, AbstractWidget) {
 return declare("my.widget.view.AbstractChart", [AbstractWidget], {
constructor:function(){

},
buildRendering: function(){
    this.inherited(arguments);
    var gridDiv = document.createElement("div");
    gridDiv.setAttribute("dojoAttachPoint", "gridPlaceHolder");
},
postCreate:function(){
    this.inherited(arguments);
   //Here I could not get newly created node gridPlaceHolder
    console.log(" POST CREATION");
}
});
});

当我在控制台中打印时（后期创建方法中的断点）

this.domNode

它在文档中显示最新创建的节点（上面模板中的最后一个节点）

<div dojoattachpoint="gridPlaceHolder"></div>

但我无法在post create方法中访问 gridPlaceHolder 附加点。

还有什么需要配置吗？请帮助我:)）

Answer 1

data-dojo-attach-point（你应该使用1.6+而不是dojoAttachPoint）允许你在模板中拥有dom节点的句柄。它由_TemplatedMixin的buildRendering（）解析，所以它将在此.inherited行之后的buildRendering方法中提供。

您无法使用setAttribute设置data-dojo-attach-point，只能在模板中定义以由TemplatedMixin解析。如果你需要你的子窗口小部件除了父模板中的内容之外还添加一些标记，你可以在父标记中定义一个变量，并在你的子窗口小部件中覆盖它：

您的AbstractWidget模板：

<div data-dojo-attach-point="widget">
    <div data-dojo-attach-point="title">${name}</div>
    <div data-dojo-attach-point="dnmschart"></div>
    ${childMarkup}
</div>

然后你需要在child.inherited之前在child的buildRendering中添加额外的标记：

require([
    'dojo/_base/declare',
    'my/widget/view/AbstractWidget'
], function (declare, AbstractWidget) {
return declare("my.widget.view.AbstractChart", [AbstractWidget], {

    buildRendering: function(){
        this.childMarkup = '<div data-dojo-attach-point="gridPlaceHolder"></div>';
        this.inherited(arguments);
    }
});

Answer 2

正如stafamus所说，这里的主要问题是你在解析模板之后尝试将data-dojo-attach-point或dojoAttachPoint分配给一个节点（这在this.inherited期间发生）拨打buildRendering。

除此之外，鉴于原始帖子中的代码，您似乎也从未真正将您在buildRendering中创建的标记添加到窗口小部件的DOM中 - 您只创建了一个div没有附加到任何现有的DOM树。我在这一点上有点困惑，因为你声称你看到了你添加的节点的标记，这对于上面的代码或stafamus的答案中的代码是不可能的。

不是试图将额外的标记转储到模板中，您也可以执行程序化等效于连接点在这种情况下的操作：创建DOM节点，将其附加到窗口小部件的DOM，然后分配它到this.gridPlaceHolder。 e.g：

buildRendering: function () {
    this.inherited(arguments);
    this.gridPlaceHolder = document.createElement('div');
    this.domNode.appendChild(this.gridPlaceholder);
}

Dojo1.9：从另一个自定义窗口小部件模板字符串更新继承的自定义窗口小部件未反映

2 个答案: