在 Dojo 1.x（Dojo Toolkit） 中，data-dojo-type 属性用于声明式地指定一个 DOM 元素关联的 Dojo 组件或模块的 JavaScript 代码。它告诉 Dojo 的解析器（dojo/parser）将某个 HTML 元素实例化为特定的 Dojo 组件（通常是 Dijit 小部件或自定义组件）。
详细说明
-
作用：
data-dojo-type的值是一个 AMD 模块路径，指向一个 Dojo 组件的 JavaScript 类（通常是基于dijit/_WidgetBase的类）。当dojo/parser解析页面时，它会根据data-dojo-type的值加载对应的模块，并将 HTML 元素转换为该组件的实例。 -
与 JavaScript 代码的关系：
data-dojo-type指定的模块路径对应于define或require中定义的 JavaScript 模块。例如，如果你的组件定义在js/MyCounter.js中，data-dojo-type会指向"js/MyCounter"。 -
使用场景：
它通常用于声明式组件创建（declarative widget creation），允许开发者直接在 HTML 中定义组件，而无需在 JavaScript 中手动实例化。
示例
以下是一个使用 data-dojo-type 的示例：
<!DOCTYPE html>
<html>
<head>
<title>Dojo 1.x Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.16.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
<script>
require(["dojo/parser", "dojo/domReady!"], function(parser) {
parser.parse(); // 解析页面中的 data-dojo-type
});
</script>
</head>
<body>
<div data-dojo-type="js/MyCounter" data-dojo-props="initialCount: 0"></div>
</body>
</html>
对应的 JavaScript 组件（js/MyCounter.js）
define([
"dojo/_base/declare",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dojo/text!./templates/MyCounter.html"
], function(declare, _WidgetBase, _TemplatedMixin, template) {
return declare([_WidgetBase, _TemplatedMixin], {
templateString: template,
initialCount: 0,
postCreate: function() {
this.inherited(arguments);
this.countNode.innerHTML = this.initialCount;
}
});
});
对应的模板（js/templates/MyCounter.html）
<div>
<h1>Count: <span data-dojo-attach-point="countNode"></span></h1>
</div>
关键点
-
data-dojo-type的值：- 指向 AMD 模块路径，例如
"dijit/form/Button"（内置 Dijit 组件）或"js/MyCounter"（自定义组件）。 - 路径必须与
define或require中的模块定义一致。
- 指向 AMD 模块路径，例如
-
data-dojo-props：- 用于传递组件的初始属性，例如
initialCount: 0。 - 属性值会映射到组件类的实例属性。
- 用于传递组件的初始属性，例如
-
dojo/parser：dojo/parser负责扫描页面，查找带有data-dojo-type的元素，并实例化对应的组件。- 必须在
require中加载dojo/parser并调用parser.parse()。
-
声明式 vs 编程式：
- 声明式：通过
data-dojo-type在 HTML 中定义组件，适合快速开发。 - 编程式：在 JavaScript 中手动创建组件实例，适合动态场景。例如：
require(["js/MyCounter", "dojo/dom-construct", "dojo/dom"], function(MyCounter, domConstruct, dom) { var counter = new MyCounter({ initialCount: 0 }); domConstruct.place(counter.domNode, dom.byId("app")); counter.startup(); });
- 声明式：通过
注意事项
- 模块路径：确保
data-dojo-type的路径正确，相对于 Dojo 的baseUrl或项目配置。 - 异步加载：Dojo 1.x 默认使用 AMD 异步加载，需设置
data-dojo-config="async: true"。 - 调试：如果组件未正确渲染，检查浏览器的控制台是否有模块加载错误，或确认
dojo/parser是否正确调用。 - Dijit 组件：Dojo 1.x 的内置组件（如
dijit/form/Button）也可以通过data-dojo-type使用，例如：<button data-dojo-type="dijit/form/Button">Click Me</button>
总结
data-dojo-type 确实用来指定组件的 JavaScript 代码（AMD 模块路径），它是 Dojo 1.x 声明式组件创建的核心机制。通过结合 dojo/parser 和 data-dojo-props，你可以在 HTML 中快速定义和配置组件。如果你有更具体的需求（例如如何处理事件、添加样式或调试问题），请告诉我，我可以提供进一步的帮助或示例！
浙公网安备 33010602011771号