javascript - 找不到 Ember 组件

Question

我想制作一个组件来包装来自 HTML5 拖放 API 的事件。这是我在 Ember 中制作的第一个组件，请耐心等待。我们将模板预编译为 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');
        }
    }
});

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

{{yield}}

它非常简单，因为它应该只包装一些其他 html 元素。并在文件或项目已放入其区域内时在 Controller 上发送 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 文档，它指出:

Note: Components must have at least one dash in their name. So blog-post is an acceptable name, so is audio-player-controls, but post is not

引用:Defining Components