I want to make a component to wrap the events from the HTML5 drag & drop API. This is the first component I made in Ember so bear with me. We pre-compile the templates into Templates.js and Components.js. We are using HTMLBars for the templates. I've looked at the official Ember docs and some tutorials on Ember components but still it says:

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

This is the Javascript code for the component in 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');
        }
    }
});

This is the Handlebars/Components/dropzone.hbs component template:

{{yield}}

It's very simple because it should only wrap some other html elements. And send for the dropped action on the controller when a file or item has been drop within it's zone.

This is how the template compiler compiled the Handlebars/Components/dropzone.hbs template:

Ember.TEMPLATES["components/dropzone"] = Ember.HTMLBars.template((function () {
  return {
    meta: {
      "revision": "[email protected]+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: []
  };
}()));

This is how I implemented the component in the main template:

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

From the things I read in the Ember docs and tutorials I Googled everything should be in order.

I want to make a component to wrap the events from the HTML5 drag & drop API. This is the first component I made in Ember so bear with me. We pre-compile the templates into Templates.js and Components.js. We are using HTMLBars for the templates. I've looked at the official Ember docs and some tutorials on Ember components but still it says:

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

This is the Javascript code for the component in 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');
        }
    }
});

This is the Handlebars/Components/dropzone.hbs component template:

{{yield}}

It's very simple because it should only wrap some other html elements. And send for the dropped action on the controller when a file or item has been drop within it's zone.

This is how the template compiler compiled the Handlebars/Components/dropzone.hbs template:

Ember.TEMPLATES["components/dropzone"] = Ember.HTMLBars.template((function () {
  return {
    meta: {
      "revision": "[email protected]+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: []
  };
}()));

This is how I implemented the component in the main template:

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

From the things I read in the Ember docs and tutorials I Googled everything should be in order.

• javascript
• ember.js
• components

• Out of interest have you considered dasherizing your component? According to the emberjs docs components should be dasherized to avoid collision with other potential tags. – Deej Commented Jul 28, 2015 at 13:35
• Oddly enough that did the trick. By changing dropzone to drop-zone the component started working perfectly. Thank you, if you create an answer I will accept it! – Feanaro Commented Jul 28, 2015 at 13:44
• That's not "odd"; the components have to be labeled that way! There should have been an error in the console telling you that you've named the component wrong and that you have to add a dash. – Alex LaFroscia Commented Jul 29, 2015 at 16:10

1 Answer 1

This is a follow up to my comment above. According to EmberJS documentation it states:

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

Reference: Defining Components