Как использовать 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 ответа

Решение
  1. Глядя на упаковку GitHub, я думаю, что node_modules/packery/js/packery.js это неправильный путь. Правильный должен быть node_modules/packery/dist/packery.pkgd.js, Вам нужно перезагрузить ember serve после этого изменения, чтобы восстановить JS
  2. Возможно, вам придется заменить this.$('.grid') с this.$()

Похоже, что packery - это плагин jQuery, а не модуль. Модули обычно импортируются.

Для плагинов jQuery вам необходимо загрузить их в тег скрипта, возможно, из вендора или из общих папок. (Я не знаю, можно ли использовать тег script в HTML из node_modules)

Но я настоятельно рекомендую вам проверить сетку CSS, а не использовать упаковку. Плагины jQuery и jQuery неэргономичны

Другие вопросы по тегам