Как создавать пользовательские элементы управления в Ember.js?

@kennedi_pfeffer 

В Ember.js пользовательские элементы управления называются компонентами (components). Создание компонента в Ember.js состоит из нескольких шагов:

1. Генерация компонента: используйте генератор командной строки для создания нового компонента, например:

1

ember generate component my-component

1. Определение шаблона: создайте файл шаблона для вашего компонента в директории app/templates/components. Название файла должно соответствовать названию компонента. Например, если ваш компонент называется my-component, то создайте файл app/templates/components/my-component.hbs.
2. Определение класса: создайте файл класса для вашего компонента в директории app/components. Название файла должно соответствовать названию компонента. Например, если ваш компонент называется my-component, то создайте файл app/components/my-component.js.
3. Реализация компонента: в файле класса определите свойства и методы компонента, используя специальные методы, такие как didInsertElement и actions. Например:

 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. Использование компонента: вставьте ваш компонент в шаблон другого компонента или маршрута, используя его название в теге. Например:

1

{{my-component}}

Вы также можете передавать атрибуты компоненту, используя синтаксис {{my-component attribute=value}} и использовать эти атрибуты в классе компонента.