title: Ember component not found
body: <p>I want to make a component to wrap the events from the HTML5 drag &amp; drop API. This is the first component I made in Ember so bear with me. We pre-compile the templates into <code>Templates.js</code> and <code>Components.js</code>. 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:</p>
  
  <pre><code>Uncaught Error: Assertion Failed: A helper named 'dropzone' could not be found
  </code></pre>
  
  <p>This is the <code>Javascript</code> code for the component in <code>JS/Components/dropzone.js</code>:</p>
  
  <pre><code>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');
          }
      }
  });
  </code></pre>
  
  <p>This is the <code>Handlebars/Components/dropzone.hbs</code> component template:</p>
  
  <pre><code>{{yield}}
  </code></pre>
  
  <p>It's very simple because it should only wrap some other html elements. And send for the <code>dropped</code> action on the controller when a file or item has been drop within it's zone.</p>
  
  <p>This is how the template compiler compiled the <code>Handlebars/Components/dropzone.hbs</code> template:</p>
  
  <pre><code>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: []
    };
  }()));
  </code></pre>
  
  <p>This is how I implemented the component in the main template:</p>
  
  <pre><code>{{#dropzone type="cover"}}
          &lt;img title="Cover picture" alt="Cover picture" {{bind-attr src=data.cover}} class="cover-picture" /&gt;
  {{/dropzone}}
  </code></pre>
  
  <p>From the things I read in the Ember docs and tutorials I Googled everything should be in order.</p>