Dojo数据属性

Question

我最近一直在研究Dojo作为jQuery和Backbone的替代品。到目前为止我喜欢它，但我唯一不喜欢的是Dojo使用HTML5数据*属性。

我不喜欢混合使用Javascript和HTML，我更喜欢将所有内容完全分开。有没有办法用Dojo做到这一点？

Answer 1

您可以选择是以编程方式编写小部件还是以声明方式编写小部件。两个人之间的利益/差异在@BuffaloBuffalo给你的链接上进行了比较。

• https://stackoverflow.com/a/19132588/1915448
• Difference between programmatically vs declaratively created widgets in dojo?

声明

HTML

<button data-dojo-type="dijit/form/Button">Click me</button>

的JavaScript

require(["dijit/form/Button", "dojo/parser"]);

您必须将parseOnLoad: true置于 Dojo配置中，或使用dojo/parser模块API手动解析节点。

---

编程

HTML

<button id="myBtn">Click me</button>

的JavaScript

require(["dojo/dom", "dijit/form/Button", "dojo/domReady!"], function(dom, Button) {
    new Button({
        label: "Click me"
    }, dom.byId("myBtn"));
});

---

差异非常明显，但有一点需要注意。如您所见，声明性代码从按钮获取标签，使用以编程方式创建的小部件时不会发生这种情况。它们只使用DOM节点作为占位符，它不会查看其属性或HTML属性。

---

但是，除了定义小部件之外，您还可以使用数据属性做更多事情。我将在下面列出它们，并为您提供一种替代方法，让您可以使用JavaScript实现相同的目标：

• data-dojo-config用于加载Dojo配置。替代方法是创建一个JavaScript文件并声明包含这些属性的dojoConfig全局对象。
• data-dojo-attach-point和data-dojo-attach-event用于创建从模板呈现的DOM节点的附加点或引用。您可以通过使用dojo/query模块并通过查询窗口小部件domNode
获取正确的DOM节点/事件处理程序来实现相同的功能。
• data-dojo-props使您可以通过HTML5属性配置窗口小部件属性。替代方法是获取窗口小部件引用并使用set()函数。