Dojo将模板化小部件加载到data-dojo类型中

Question

我创建了一个非常简单的HTML模板化小部件。

<div class="tool">
  <a href="" id="freehand">
    <i class="flaticon-writing9"></i>
  </a>
</div>
<div class="tool">
  <a href="" id="polygon">
    <i class="flaticon-constellation"></i>
  </a>
</div>

我的小部件声明如下所示：

define([
  "dojo/_base/declare",
  "dijit/_WidgetBase",
  "dijit/_TemplatedMixin",
  "dojo/text!./templates/DrawingToolsWidget.html",
  "dojo/parser",
  "dojo/ready"
],
  function(declare, _WidgetBase, _TemplatedMixin, template, parser, ready) {

    return declare("DrawingToolsWidget",[_WidgetBase, _TemplatedMixin], {
      templateString: template,

      constructor: function() {
        console.log(this);
      }

    });
    ready(function(){
      parser.parse();
    });
  }

);

我尝试使用data-dojo-type属性将其附加到主DOM中的一个点：

<div id="drawing-tools-container" data-dojo-type="DrawingToolsWidget"></div>

但是我一直得到一个通用的dojo / parser :: parse（）错误Error {}这对于调试来说是完全没用的。

我的目录结构是：/ index.html（主要是DOM）/app/DrawingToolWidget/templates/DrawingToolsWidget.html(template)/app/DrawingToolWidget/DrawingToolWidget.js(declaration）

我还试图附加“app / DrawingToolWidget / DrawingToolWidget”，以防它想要小部件声明的路径。不。

我做错了什么？为什么将标记片段附加到DOM这么难？

Answer 1

您的模板无效，因为您只能拥有1个根元素。我不确定这是否是主要问题，但这可能会解决某些问题。文档引用：

  

请注意，在定义模板时，它只能包含一个根   节点定义（就像XML文档一样）。多个节点在   最高级别是不允许的。

文章：http://dojotoolkit.org/documentation/tutorials/1.9/templated/

工作模板将是：

<div>
    <div class="tool">
        <a href="" id="freehand">
            <i class="flaticon-writing9"></i>
        </a>
    </div>
    <div class="tool">
        <a href="" id="polygon">
            <i class="flaticon-constellation"></i>
        </a>
    </div>
</div>

可以找到工作示例here。

---

关于调试问题，您使用谷歌浏览器？遇到错误时，您应该尝试关闭并打开开发人员工具/控制台，如果这样做，Error旁边应该有一个小箭头，例如：

正如你在这里看到的，有两个箭头，左边的一个给你堆栈跟踪，而右边的一个（几乎在错误行的末尾），会给你关于错误的详细信息（如果你点击/扩展它。）