Ich möchte eine Komponente zum Wrapping der Ereignisse von der HTML5 Drag & Drop-API machen. Das ist die erste Komponente, die ich in Ember gemacht habe, also erträgt mich. Wir kompilieren die Vorlagen in Templates.js und Components.js vorkompilieren. Wir verwenden HTMLBars für die Vorlagen. Ich habe bei den offiziellen Ember docs und einige Tutorials auf Ember Komponenten gesucht, aber immer noch sagt es:Ember-Komponente nicht gefunden
Uncaught Error: Assertion Failed: A helper named 'dropzone' could not be found
Dies ist der Javascript Code für die Komponente 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');
}
}
});
Dies ist die Handlebars/Components/dropzone.hbs Komponente Vorlage:
{{yield}}
Es ist sehr einfach, weil es nur einige andere HTML-Elemente umhüllen sollte. Und senden Sie die Aktion dropped auf dem Controller, wenn eine Datei oder ein Element innerhalb der Zone gelöscht wurde.
Dies ist, wie die Vorlage Compiler die Handlebars/Components/dropzone.hbs Vorlage zusammengestellt:
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: []
};
}()));
Dies ist, wie ich die Komponente in der Hauptvorlage implementiert:
{{#dropzone type="cover"}}
<img title="Cover picture" alt="Cover picture" {{bind-attr src=data.cover}} class="cover-picture" />
{{/dropzone}}
Von dem, was ich in den Ember docs lesen und Tutorials habe ich gegoogelt, alles sollte in Ordnung sein.
Aus Interesse haben Sie Ihre Komponente in Betracht gezogen dasherizing? Laut den Dokumenten von emberjs sollten Komponenten dasherisiert werden, um eine Kollision mit anderen potentiellen Tags zu vermeiden. – David
Seltsamerweise hat das den Trick gemacht. Durch die Änderung von "Dropzone" in "Drop-Zone" funktionierte die Komponente perfekt. Danke, wenn Sie eine Antwort erstellen, werde ich es akzeptieren! – Feanaro
Das ist nicht "seltsam"; Die Komponenten müssen so gekennzeichnet sein! In der Konsole sollte ein Fehler aufgetreten sein, der besagt, dass Sie die Komponente falsch benannt haben und dass Sie einen Bindestrich hinzufügen müssen. – alexlafroscia