Chcę utworzyć komponent do zawijania zdarzeń z interfejsu API opuść HTML5 przeciągnij &. To pierwszy komponent, który zrobiłem w Emberu, więc bądź przy mnie. Wstępnie kompilujemy szablony do Templates.js i Components.js. Używamy HTMLBars do szablonów. Szukałem w oficjalnych docs Ember i kilka tutoriali na składniki Ember ale nadal mówi:Nie znaleziono komponentu Ember
Uncaught Error: Assertion Failed: A helper named 'dropzone' could not be found
Jest to kod Javascript dla komponentu w 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');
}
}
});
Jest to komponent Handlebars/Components/dropzone.hbs szablon:
{{yield}}
Jest to bardzo proste, ponieważ powinno zawijać tylko niektóre inne elementy HTML. I wyślij o akcję dropped na kontrolerze, gdy plik lub przedmiot został upuszczony w jego strefie.
ten sposób kompilator szablon skompilował Handlebars/Components/dropzone.hbs szablonu:
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: []
};
}()));
ten sposób I wdrożone komponentu w głównym szablonie:
{{#dropzone type="cover"}}
<img title="Cover picture" alt="Cover picture" {{bind-attr src=data.cover}} class="cover-picture" />
{{/dropzone}}
Z rzeczy, które przeczytałem w docs Ember i tutoriale I googled wszystko powinno być w porządku.
Out zainteresowania czy za dasherizing swój składnik? Zgodnie z dokumentami emberjs składniki powinny zostać poddane dasherized, aby uniknąć kolizji z innymi potencjalnymi tagami. – David
Dziwne, że to wystarczyło. Zmieniając 'dropzone' na' drop-zone' komponent zaczął działać idealnie. Dziękuję, jeśli utworzysz odpowiedź, zaakceptuję to! – Feanaro
To nie jest "dziwne"; składniki muszą być oznaczone w ten sposób! Powinien pojawić się błąd w konsoli informujący, że nazwa komponentu jest błędna i że musisz dodać myślnik. – alexlafroscia