Javascript 未找到余烬组件

我想制作一个组件来包装HTML5拖放API中的事件。这是我在余烬中制作的第一个组件，请耐心等待。我们将模板预编译为

templates.js

和

Components.js

。我们使用HTMLBars作为模板。我已经看过官方的Ember文档和一些关于Ember组件的教程，但它仍然说：

Uncaught Error: Assertion Failed: A helper named 'dropzone' could not be found

这是

JS/Components/dropzone.JS中组件的
Javascript
代码：

App.DropzoneComponent = Ember.Component.extend({
    classNames: ['dropzone'],
    classNameBindings: ['dragClass'],
    dragClass: 'deactivated',
    type: null,

    dragLeave(event) {
        if (get(this, 'type') != null) {
            event.preventDefault();
            set(this, 'dragClass', 'deactivated');
        }
    },

    dragOver(event) {
        if (get(this, 'type') != null) {
            event.preventDefault();
            set(this, 'dragClass', 'activated');
        }
    },

    drop(event) {
        if (get(this, 'type') != null) {
            var data = event.dataTransfer.getData('text/data');
            this.sendAction('dropped', type, data);

            set(this, 'dragClass', 'deactivated');
        }
    }
});

这是
把手/部件/dropzone.hbs
部件模板：

{{yield}}

Ember.TEMPLATES["components/dropzone"] = Ember.HTMLBars.template((function () {
  return {
    meta: {
      "revision": "Ember@1.13.5+4eb55108",
      "loc": {
        "source": null,
        "start": {
          "line": 1,
          "column": 0
        },
        "end": {
          "line": 1,
          "column": 9
        }
      }
    },
    arity: 0,
    cachedFragment: null,
    hasRendered: false,
    buildFragment: function buildFragment(dom) {
      var el0 = dom.createDocumentFragment();
      var el1 = dom.createComment("");
      dom.appendChild(el0, el1);
      return el0;
    },
    buildRenderNodes: function buildRenderNodes(dom, fragment, contextualElement) {
      var morphs = new Array(1);
      morphs[0] = dom.createMorphAt(fragment,0,0,contextualElement);
      dom.insertBoundary(fragment, 0);
      dom.insertBoundary(fragment, null);
      return morphs;
    },
    statements: [
      ["content","yield",["loc",[null,[1,0],[1,9]]]]
    ],
    locals: [],
    templates: []
  };
}()));

{{#dropzone type="cover"}}
        <img title="Cover picture" alt="Cover picture" {{bind-attr src=data.cover}} class="cover-picture" />
{{/dropzone}}

它非常简单，因为它应该只包装一些其他html元素。当文件或项目被放置在控制器的区域内时，发送控制器上的
已放置
操作

这是模板编译器编译
把手/Components/dropzone.hbs
模板的方式：

{{yield}}

Ember.TEMPLATES["components/dropzone"] = Ember.HTMLBars.template((function () {
  return {
    meta: {
      "revision": "Ember@1.13.5+4eb55108",
      "loc": {
        "source": null,
        "start": {
          "line": 1,
          "column": 0
        },
        "end": {
          "line": 1,
          "column": 9
        }
      }
    },
    arity: 0,
    cachedFragment: null,
    hasRendered: false,
    buildFragment: function buildFragment(dom) {
      var el0 = dom.createDocumentFragment();
      var el1 = dom.createComment("");
      dom.appendChild(el0, el1);
      return el0;
    },
    buildRenderNodes: function buildRenderNodes(dom, fragment, contextualElement) {
      var morphs = new Array(1);
      morphs[0] = dom.createMorphAt(fragment,0,0,contextualElement);
      dom.insertBoundary(fragment, 0);
      dom.insertBoundary(fragment, null);
      return morphs;
    },
    statements: [
      ["content","yield",["loc",[null,[1,0],[1,9]]]]
    ],
    locals: [],
    templates: []
  };
}()));

{{#dropzone type="cover"}}
        <img title="Cover picture" alt="Cover picture" {{bind-attr src=data.cover}} class="cover-picture" />
{{/dropzone}}

以下是我在主模板中实现组件的方式：

{{yield}}

Ember.TEMPLATES["components/dropzone"] = Ember.HTMLBars.template((function () {
  return {
    meta: {
      "revision": "Ember@1.13.5+4eb55108",
      "loc": {
        "source": null,
        "start": {
          "line": 1,
          "column": 0
        },
        "end": {
          "line": 1,
          "column": 9
        }
      }
    },
    arity: 0,
    cachedFragment: null,
    hasRendered: false,
    buildFragment: function buildFragment(dom) {
      var el0 = dom.createDocumentFragment();
      var el1 = dom.createComment("");
      dom.appendChild(el0, el1);
      return el0;
    },
    buildRenderNodes: function buildRenderNodes(dom, fragment, contextualElement) {
      var morphs = new Array(1);
      morphs[0] = dom.createMorphAt(fragment,0,0,contextualElement);
      dom.insertBoundary(fragment, 0);
      dom.insertBoundary(fragment, null);
      return morphs;
    },
    statements: [
      ["content","yield",["loc",[null,[1,0],[1,9]]]]
    ],
    locals: [],
    templates: []
  };
}()));

{{#dropzone type="cover"}}
        <img title="Cover picture" alt="Cover picture" {{bind-attr src=data.cover}} class="cover-picture" />
{{/dropzone}}

{{{#dropzone type=“cover”}
{{/dropzone}}

从我在《灰烬文档》和《教程》中读到的内容来看，我在谷歌上搜索到了一切都应该井然有序。
这是我在上面评论的后续内容。根据EmberJS文件，它指出：

注意：组件名称中必须至少有一个破折号。所以博客帖子是一个可以接受的名字，音频播放器控件也是，但帖子不是

参考资料：
出于兴趣，您是否考虑过对组件进行dasherizing？根据emberjs的说法，应该对文档组件进行dasherize处理，以避免与其他潜在的标记发生冲突。奇怪的是，这样做了。通过将
dropzone
更改为
dropzone
，组件开始正常工作。谢谢你，如果你创造一个答案，我会接受它！这并不“奇怪”；组件必须以这种方式标记！控制台中应该有一个错误，告诉您组件命名错误，必须添加破折号。谢谢。这真是一个令人惊讶的“wtf”时刻