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文件，它说：

注意：组件名称中必须至少有一个短划线。所以blog-post是一个可接受的名字，音频播放器控件也是如此，但帖子不是

参考：Defining Components

未找到Ember组件

1 个答案: