Создание компонентов в подпапках в ember/ember-cli

Основываясь на рекомендации по подготовке к Ember 2.0...

• В общем случае замените view + контроллеры компонентами
• Используйте только контроллеры на уровне маршрута...

... мы должны избегать Controller и View в пользу Component s. Мне не удалось выяснить и/или понять, как создавать компоненты, которые не являются непосредственными родителями в папке компонентов, то есть компоненты /component -name.js.

Моя текущая папка контроллеров выглядит примерно так:

/controllers
    /account
        index.js
        edit.js
    /business
        index.js

В принципе, существуют подпапки, которые группируют логику на основе разделов приложения. Как это сделать с помощью только компонентов?

Увидев, что в них компоненты должны иметь "-", я попытался, но получаю сообщение об ошибке...

ember generate component account/index-module.js
You specified "account/index-module.js", but due to a bug in Handlebars (< 2.0) slashes within components/helpers are not allowed.

Все компоненты должны быть похожи на

components
    account-index.js
    account-new.js
    business-index.js

то есть. все в одной папке? Это начнет выходить из-под контроля с добавлением того, что я на самом деле считаю компонентами (например, video-viewer.js, text-editor.js, radio-button.js).

Мне бы очень хотелось иметь компоненты в подпапках, но не знаю, как это сделать.

components
    /media
        /audio
            audio-player.js
        /video
            video-player.js
    /text-editing
        text-editor.js
        editor-toolbar.js

Папка моих компонентов уже грубая, и я только начал:

enter image description here

Можно ли оставить учетную запись/бизнес-логику в контроллерах (видя, что она говорит, что вы должны использовать контроллеры только на уровне маршрута)?

Я действительно смущен об этом соглашении "все компоненты, все время".

Ответы

Ответ 1

Итак, у меня была такая же проблема, как и у ember 1.9-beta.3 (эта версия, которую я тестировал). Возможно наличие компонентов, вложенных в каталоги ресурсов.

Это означает, что у вас может быть "пользовательский" маршрут или ресурс. И пусть у вас есть компонент, который вы хотите использовать только с пользовательским ресурсом, поэтому вы хотите поместить компонент в каталог ресурсов.

Способ сделать это - поместить компонент в каталог ресурсов app/pods/user/component-name/template.hbs. Важная часть состоит в том, чтобы помнить, что компоненты должны иметь тире в их имени. Это не может быть просто .../user/component, оно должно быть .../user/component-name с тире. Затем вы можете использовать компонент в качестве {{user/component-name}} в своих шаблонах.

Также я думаю, что это возможно только при использовании структуры pod.

Ответ 2

Как утверждается, это связано с Handlebars 1.x и скоро будет доступно.

Ember 1.9 beta builds в настоящее время поддерживает это, хотя я не уверен, если бы ember-cli resolver работал с ним прямо сейчас. Подробнее о Handlebars 2.0 здесь.

Использование структуры pods также поможет организации, и я считаю, что это будет рекомендуемая стратегия в будущем.

В настоящее время я предлагаю не беспокоиться об этом! Помните, что план перехода будет плавным, и поскольку официальные выпуски выйдут на CLI Ember и Ember, вы получите предупреждения об отказе.

Ответ 3

Хорошо, я думаю, что этот вопрос/ответ нуждается в небольшом обновлении для 2019. Я использую Ember в течение всего месяца, и папка с моими компонентами уже стала свиной. И учебник, и основные документы по API на самом деле не описывают, как организовать ваши компоненты.

Поэтому я сделал поиск, конечно. И единственные ответы, которые я смог найти (например, этот), относятся к 2014–2015 гг. И не отражают современную Эмбер. Я собирался принять свою судьбу, когда нашел это в руководстве по преобразованию синтаксиса Ember. (Примечание для ребят из Ember: это важная проблема, с которой столкнется почти каждый новый пользователь. Она должна быть более заметна в документации. Может быть, не учебник, но определенно в разделе "Компоненты")

Фактически вы можете создавать компоненты в подпапке в Ember следующим образом:

$ ember generate component foo/bar-baz
installing component
  create app/components/foo/bar-baz.js
  create app/templates/components/foo/bar-baz.hbs
installing component-test
  create tests/integration/components/foo/bar-baz-test.js

Так что здорово, файлы создаются в components/foo и templates/components/foo. И чтобы разрешить имя компонента для использования в другом шаблоне, вы можете использовать синтаксис старого стиля:

{{foo/bar-baz }}

Или новый стиль синтаксиса угловых скобок:

<Foo::BarBaz />