解析时如何修改Dijit模板化小部件dom结构？

Posted 2023-02-16

【中文标题】解析时如何修改Dijit模板化小部件dom结构？

【英文标题】：How to modify Dijit templated widget dom structure when it is parsed?

【发布时间】：2013-02-15 09:38:35

【问题描述】：

我正在创建一个在 html 中定义的 Dijit 模板化自定义小部件，如下所示：

<div data-dojo-type="widgets/Test">Bla bla bla</div>

这被替换为模板。就本示例而言，假设它是一个简单的 div：

<div></div>

现在我有一个问题。我似乎找不到在小部件中获取此“Bla bla bla”（换句话说，初始 innerHTML）的方法，我需要它。

有什么想法吗？

【问题讨论】：

我找到了答案。 “postscript”函数有两个参数，第二个是小部件模板渲染之前状态的初始节点。我还在想是否有更好的解决方案？

【参考方案1】：

如果您希望在解析小部件时修改小部件的模板，您可以覆盖小部件的 markupFactory 函数。您可以在 CustomWidget.js 文件中执行此操作，如下所示：

var CustomWidget = declare('path/to/CustomWidget', [], 
   // Widget code here.
);

CustomWidget.markupFactory = function(props, node, clazz) 

  // Modify the props defined in data-dojo-props.
  // Modify the node that your widget is declared in.

  // Don't forget to actually return the instance of your custom Widget!
  return new clazz(props, node);  

【讨论】：

不适合我的需要。我想模仿一些 Dijit 小部件已经在做的事情——即读取小部件的初始 DOM 并以某种方式对其进行转换。例如：而不是'bla bla bla'，我想放一个通用的节点列表，然后在小部件初始化时用它做一些事情。

啊，我明白了。如果你想修改你的小部件被解析的方式，你需要重写它的 markupFactory 函数。我将在我的答案中添加更多解释；让我知道它是否更适合您。我也不完全清楚为什么你最初想要一些东西只是为了用不同的 DOM 结构替换它。为什么不在自定义小部件的模板中定义所需的 DOM 结构？

livedocs.dojotoolkit.org/dijit/layout/TabContainer（查看这个“声明性示例”）。这是一个非常有用的例子。 TabContainer 内的三个 ContentPanes。您不能对此进行硬编码。

我想我缺少的是当你说“这可能非常有用”时你所说的“这个”。该声明性示例是 100% 硬编码的，那么您尝试访问/更改它呢？您是否尝试制作自定义 TabContainer（即您的小部件是否继承自 dijit/layout/TabContainer）？

"This" 是通用的。我即将创建一系列自定义小部件，但不是仅用于单一目的，而是用于许多不同的目的。所以我需要知道如何做任何事情。我有一个特殊情况，我需要在 div 内部（就像我给你的例子一样）并将主题包装在一些额外的标记中，然后对它们做一些事情。你有必要知道这个“东西”吗？ :)