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

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

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

this.domNode

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

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

但我无法访问 gridPlaceHolder 在 post 创建方法中的附加点。

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

Answer 1

data-dojo-attach-point（您应该将其用于 1.6+ 而不是 dojoAttachPoint）允许您在模板中处理 dom 节点。它由 _TemplatedMixin 的 buildRendering() 解析，因此它将在 this.inherited 行之后的 buildRendering 方法中可用。

不能使用setAttribute设置data-dojo-attach-point，只能定义在模板中，由TemplatedMixin解析。如果您需要 child 小部件在其 parent 模板中添加一些标记，您可以在 parent 的标记中定义一个变量，然后覆盖它在您的 child 小部件中：

您的 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 的 buildRendering 中添加额外的标记，在 this.inherited:

之前

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.

除此之外，考虑到原始 post 中的代码，您似乎根本没有将在 buildRendering 中创建的标记添加到小部件的 DOM - 您只创建了一个未附加到任何现有 DOM 树的 div。不过，我对这一点有点困惑，因为你声称你看到的是你添加的节点的标记，这对于上面的代码或 stafamus 的答案中的代码来说是不可能的。

与其尝试将额外的标记转储到您的模板中，您还不如执行与附加点在这种情况下所做的等效的编程：创建您的 DOM 节点，将其附加到您的小部件的 DOM，并将其分配给 this.gridPlaceHolder。例如：

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

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

Dojo1.9: Custom widget inherited from another custom widget template string update not reflected

dojo