I want to create a component for transferring events from the HTML5 drag and drop API. This is the first component I made at Ember, so carry me. Precompile the templates in Templates.js and Components.js . We use HTMLBars for templates. I looked at the Ember white papers 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 component template Handlebars/Components/dropzone.hbs :
{{yield}}
It is 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 falls into its zone.
Here's how the template compiler compiled the 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: [] }; }()));
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 what I read in the Ember docs and tutorials I was looking for, everything should be fine.