Как использовать Packery с Ember
Я только начал ember и хочу использовать упаковку в качестве библиотеки макетов. Приложение Ember было создано с помощью ember new wep-app
, Пакет был установлен через npm install packery
, В соответствии с управлением зависимостями Ember, я могу загрузить Packery через app.import('node_modules/packery/js/packery.js')
Как я могу использовать упаковку сейчас? application.hbs
выглядит так
<div class="grid">
<div class="grid-item">cdsc</div>
<div class="grid-item grid-item--width2">...</div>
<div class="grid-item">...</div>
</div>
Но, похоже, не работает. В аналогичном вопросе кто-то упоминает о создании компонента ember g component packery-grid
, который должен быть заполнен соответственно
import Component from '@ember/component';
export default Component.extend({
classNames: ['grid'],
didInsertElement() {
this.$('.grid').packery({
// options
itemSelector: '.grid-item'
});
}
});
Используя компонент, application.hbs
Шаблон должен выглядеть так:
{{#packery-grid}}
<div class="grid-item">cdsc</div>
<div class="grid-item grid-item--width2">...</div>
<div class="grid-item">...</div>
{{/packery-grid}}
Однако это тоже не работает. Что мне делать, чтобы упаковка была интегрирована в ember? Я использую Ember 3.5.1.
РЕДАКТИРОВАТЬ: Существует также компонент ember для упаковки, который также не работает.
2 ответа
- Глядя на упаковку GitHub, я думаю, что
node_modules/packery/js/packery.js
это неправильный путь. Правильный должен бытьnode_modules/packery/dist/packery.pkgd.js
, Вам нужно перезагрузитьember serve
после этого изменения, чтобы восстановить JS - Возможно, вам придется заменить
this.$('.grid')
сthis.$()
Похоже, что packery - это плагин jQuery, а не модуль. Модули обычно импортируются.
Для плагинов jQuery вам необходимо загрузить их в тег скрипта, возможно, из вендора или из общих папок. (Я не знаю, можно ли использовать тег script в HTML из node_modules)
Но я настоятельно рекомендую вам проверить сетку CSS, а не использовать упаковку. Плагины jQuery и jQuery неэргономичны