未找到Ember组件

Question

我想创建一个组件来包装来自HTML5拖放API的事件.这是我在Ember制作的第一个组件,所以请耐心等待.我们将模板预编译为Templates.js和Components.js.我们正在使用HTMLBars作为模板.我查看了官方的Ember文档和一些关于Ember组件的教程,但它仍然说:

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

这是Javascript组件的代码JS/Components/dropzone.js:

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');
        }
    }
});

这是Handlebars/Components/dropzone.hbs组件模板:

{{yield}}

它非常简单,因为它应该只包装其他一些html元素.dropped当文件或项目在其区域内丢失时,在控制器上发送操作.

这是模板编译器编译Handlebars/Components/dropzone.hbs模板的方式:

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}}

根据我在Ember文档和教程中阅读的内容,我用Google搜索了一切应该是有序的.

Answer 1

这是我上面评论的后续内容.根据EmberJS文件,它说:

注意:组件名称中必须至少有一个短划线.所以博客文章是一个可接受的名称,音频播放器控件也是如此,但帖子不是

参考:定义组件