Dojo：以声明方式定义带有选项的 Select-like 小部件

Question

目标是编写类似于 Select 的带有选项的自定义小部件。选项应该能够以声明的方式指定。示例：

<div data-dojo-type="MySelect"> 
  <span class="my-select-option" data-dojo-type="MySelectOption>Foo</span>
  <span class="my-select-option" data-dojo-type="MySelectOption>Bar</span>
</div>

问题是所有 <span> 都被覆盖并删除了。在 MySelect 的 JavaScript 文件中正确处理它们的方法是什么？

Answer 1

您可以结合使用 data-dojo-props 和 dojo/parser 来装饰性地配置您的自定义小部件。

这里是一个可能的标记的简单示例，请注意：

使用 data-dojo-type 为您的小部件指定自定义 "class"。
使用data-dojo-props在实例化时将任何类型的配置信息传递给构造函数。

data-dojo-props 是一个 HTML5 数据属性，适用于最新版本的 Dojo。

您 HTML 中的标记：

<div id="instanceId" data-dojo-type="nameSpace/class" data-dojo-props="data: 'some data'"></div>

这篇阅读是一个好的开始：

https://dojotoolkit.org/documentation/tutorials/1.10/declarative/

有关解析的更多信息：

https://dojotoolkit.org/reference-guide/1.10/dojo/parser.html

Dojo：以声明方式定义带有选项的 Select-like 小部件

Dojo: defining Select-like widget with Options declaratively

javascript

dojo