Ember 3.16 Octane - Компонент не отображается в Application.hbs - PullRequest
Новая
       60

Ember 3.16 Octane - Компонент не отображается в Application.hbs

2 голосов
/ 17 февраля 2020

Я использовал ember generate для создания компонента заголовка для видео на YouTube, которому я следую. У меня есть несколько вопросов -

  1. Когда я запустил ember create header компонента, терминал ответил созданием файла header.hbs в app> components, но затем пропустил заголовок. js in приложение / компонента. Я вручную создал файл заголовка. js в этом каталоге, и если я сделаю alert () в файле js, он будет работать.

  2. У меня есть следующий код в моем файле header.hbs. 

<h1>Hello There!</h1>

{{yield}}

В моем файле application.hbs: 

<Header/>


{{outlet}}

мысли, предложения? Заранее благодарю за любую помощь!

1 Ответ

1 голос
/ 18 февраля 2020

Позвольте мне попытаться объяснить это немного. В основном, в ember есть 4 вида компонентов.

без .js файла :

При вызове компонента ember сначала ищет класс компонента. Когда он не находит такой класс, поведение зависит от дополнительной функции template-only-glimmer-components. По умолчанию это включено для новых октановых приложений.

Если оно включено , то ember будет искать шаблон компонента на основе некоторых стандартных правил и использовать его, но будет нет класс поддержки. Это довольно мило. Это также в основном то, что вы получаете в приложении с октановым числом, когда вы делаете ember g component my-component.

Когда template-only-glimmer-components отключен, тогда класс компонента неявный classi c будет автоматически создан и используется вместе с правильным шаблоном. Вы не хотите этого поведения. Если он у вас есть, вы можете перейти от него: 1) создать файл .js для каждого компонента и затем 2) включить template-only-glimmer-components.

с файлом .js .

При обнаружении файла js ember получит default экспорт этого модуля. Затем он найдет правильный менеджер компонентов. На самом деле это зависит от этого экспорта: setComponentManager должен был быть вызван для него. Обычно это делается в базовом классе как @ember/component или @glimmer/component. Но вы можете также написать свой собственный менеджер компонентов.

По сути, ember также будет искать шаблон на основе этого компонента. Публичный c API для этого предлагается в this RF C, но в настоящее время частный API используется для так называемого шаблона совместного размещения , где вы размещаете свой .hbs файл рядом с вашим .js файлом с тем же именем и просто другим расширением. Это значение по умолчанию в октанте. Здесь ember внутренний шаг сборки в ember-cli в основном добавляет ваш шаблон в файл .js и использует этот API. Вы также можете увидеть результат в отладчике браузера. Поэтому при отсутствии экспорта по умолчанию ember не может найти ваш шаблон.

...