Я хочу создать компонент для переноса событий из HTML5 drag & drop API. Это первый компонент, который я сделал в Ember, так что несите меня. Мы предварительно скомпилируем шаблоны в Templates.js и Components.js. Мы используем HTMLBars для шаблонов. Я посмотрел на официальном Пост документах и некоторые учебники по компонентам Поста, но до сих пор он говорит:Компонент Ember не найден
Uncaught Error: Assertion Failed: A helper named 'dropzone' could not be found
Это Javascript код компонента в 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');
}
}
});
Это Handlebars/Components/dropzone.hbs компонента шаблон:
{{yield}}
Это очень просто, потому что это должно только обернуть некоторые другие элементы html. И отправьте за действие dropped на контроллер, когда файл или элемент был выпадет в его зоне.
Это как шаблон компилятор составил Handlebars/Components/dropzone.hbs шаблон:
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: []
};
}()));
Это, как я реализовал компонент в основном шаблоне:
{{#dropzone type="cover"}}
<img title="Cover picture" alt="Cover picture" {{bind-attr src=data.cover}} class="cover-picture" />
{{/dropzone}}
Из вещей, которые я читал в документации Поста и учебники I Googled все должно быть в порядке.
Из интереса Вы рассмотрели dasherizing свой компонент? В соответствии с компонентами emberjs docs компоненты должны быть дешифрованы, чтобы избежать столкновения с другими потенциальными тегами. – David
Как ни странно, что сделал трюк. Изменяя «dropzone» на «drop-zone», компонент начал работать отлично. Спасибо, если вы создадите ответ, я приму это! – Feanaro
Это не «странно»; компоненты должны быть помечены таким образом! На консоли должна была быть ошибка, сообщающая вам, что вы неправильно назвали компонент и что вам нужно добавить тире. – alexlafroscia