Проблема с рендерингом пользовательского компонента - PullRequest
Новая
       42

Проблема с рендерингом пользовательского компонента

0 голосов
/ 04 ноября 2019

Я пытаюсь создать пользовательский компонент для своего приложения с помощью emberJS, следовал краткому руководству и теперь я пытаюсь создать кнопку загрузки в качестве компонента.

Кажется, у меня нет проблем с кодомно мой компонент не отображается на моей главной странице. Я использовал генератор компонентов ember для его создания

здесь мой upload-button.hbs: 

<button type="button">{{@buttonText}}</button>

теперь мой upload-button.js: 

import Component from '@ember/component';

export default Component.extend({
    actions: {
        showExplorer(){
            alert()
        }
    }
});

на данный момент я просто вставил alert() метод в showExplorer()

и теперь моя главная страница application.hbs: 

<upload-button @buttonText="Uploader un fichier" {{action "showExplorer"}}/>

{{outlet}}

Я ожидаю увидеть свою кнопку, но у меня просто естьпустая страница без ошибки кода.

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

1 Ответ

2 голосов
/ 04 ноября 2019

Рад, что вы решили попробовать Ember.js :) Ваш файл upload-button.hbs и upload-button.js выглядит хорошо. Однако здесь есть несколько проблем.

  • При вызове компонента с использованием синтаксиса угловых скобок (<... />) имя должно быть CamelCased различать HTML-теги и компоненты Ember. Следовательно, нам нужно вызвать компонент upload-button как <UploadButton />.

  • Вы определили свое действие showExplorer внутри файла компонента (upload-button.js), но на него ссылаютсяв файле application.hbs. Доступ к данным в файле компонента поддержки возможен только внутри файла .hbs компонента из-за изолированного характера архитектуры компонента. Также мы можем прикрепить действие, используя модификатор {{action}}, только к элементу DOM, а не к самому компоненту. Итак,

нам нужно удалить привязку действия из файла application.hbs, 

{{!-- application.hbs --}}

<UploadButton @buttonText="Uploader un fichier"/>

и добавить то же самое в файл upload-button.hbs: 

{{!-- upload-button.hbs --}}

<button type="button" {{action "showExplorer"}}>{{@buttonText}}</button>

Работающую модель можно найти в этом CodeSandbox

Надеюсь, вы найдете изучение Ember, увлекательным процессом!

...