@kennedi_pfeffer
В Ember.js пользовательские элементы управления называются компонентами (components). Создание компонента в Ember.js состоит из нескольких шагов:
1
|
ember generate component my-component |
1 2 3 4 5 6 7 8 9 10 11 |
import Component from '@ember/component'; export default Component.extend({ classNames: ['my-component'], actions: { handleClick() { console.log('Button clicked'); } } }); |
1
|
{{my-component}} |
Вы также можете передавать атрибуты компоненту, используя синтаксис {{my-component attribute=value}}
и использовать эти атрибуты в классе компонента.
@kennedi_pfeffer
Вот пример более подробного создания и использования пользовательского компонента в Ember.js:
Запустите следующую команду в терминале для создания нового компонента "my-component":
1
|
ember generate component my-component |
Создайте файл шаблона для компонента "my-component" по пути app/templates/components/my-component.hbs
и определите в нем разметку компонента. Например, содержимое файла my-component.hbs
может выглядеть так:
1 2 3 |
<div class="my-component"> <button {{action "handleClick"}}>Click me</button> </div> |
Создайте файл класса для компонента "my-component" по пути app/components/my-component.js
. Определите класс компонента и его функциональность. Например, содержимое файла my-component.js
может быть таким:
1 2 3 4 5 6 7 8 9 10 |
import Component from '@ember/component'; export default Component.extend({ actions: { handleClick() { console.log('Button clicked'); // Действие, которое происходит при клике на кнопку } } }); |
Вставьте компонент "my-component" в любой шаблон, где вы хотите его использовать:
1
|
{{my-component}} |
Теперь компонент "my-component" будет отображаться в этом шаблоне, и при нажатии на кнопку будет выводиться сообщение "Button clicked" в консоль.
Это основы создания пользовательских компонентов в Ember.js. Вы можете дальше расширять функциональность компонентов, передавать им атрибуты и использовать их в различных частях вашего приложения.