Создание и регистрация компонентов

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

Структура компонента

Компонент в Ember.js состоит из нескольких частей:

  1. Шаблон (Template) — HTML-разметка, которая будет отображаться на экране.
  2. Логика компонента (JavaScript) — поведение и состояние компонента, обработка событий и взаимодействие с моделью.
  3. Стили (CSS) — стили, применяемые только к данному компоненту (если используются).

Все компоненты в Ember.js представляют собой классы, которые наследуют от базового класса Component.

Создание компонента

Для создания нового компонента в Ember.js используется командная строка. С помощью Ember CLI можно сгенерировать компонент с помощью следующей команды:

ember generate component название-компонента

Эта команда создаст несколько файлов:

  • app/components/название-компонента.js — файл с логикой компонента.
  • app/templates/components/название-компонента.hbs — шаблон компонента.
  • app/styles/components/название-компонента.css — файл с возможными стилями компонента (если используется).

Пример компонента user-profile:

app/components/user-profile.js

import Component from '@glimmer/component';

export default class UserProfileComponent extends Component {
  get fullName() {
    return `${this.args.firstName} ${this.args.lastName}`;
  }
}

app/templates/components/user-profile.hbs

<div class="user-profile">
  <h2>{{this.fullName}}</h2>
  <p>Age: {{this.args.age}}</p>
</div>

Этот компонент отображает имя пользователя и возраст, используя аргументы, переданные в компонент.

Регистрация компонента

В Ember.js компоненты автоматически регистрируются и становятся доступными для использования в шаблонах, если они находятся в правильном каталоге и имеют нужную структуру. Например, компонент user-profile автоматически доступен для использования в других шаблонах приложения без необходимости дополнительной регистрации.

Если компонент используется в других частях приложения, достаточно просто вставить его в шаблон:

<UserProfile @firstName="John" @lastName="Doe" @age="30" />

Этот код отобразит компонент с полным именем и возрастом, переданными через аргументы.

Логика компонента и передача данных

Каждый компонент может получать данные от родительского компонента или маршрута через аргументы (props). В Ember.js аргументы передаются через атрибуты компонента в шаблоне:

<MyComponent @title="Welcome" @isVisible={{this.isVisible}} />

Здесь @title и @isVisible — это аргументы, которые будут переданы в компонент. Внутри компонента они будут доступны через свойство args:

export default class MyComponent extends Component {
  get title() {
    return this.args.title;
  }
  get isVisible() {
    return this.args.isVisible;
  }
}

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

export default class ToggleComponent extends Component {
  isToggled = false;

  toggle() {
    this.isToggled = !this.isToggled;
  }
}

В шаблоне компонент может использовать это состояние:

<button {{on "click" this.toggle}}>Toggle</button>
<p>{{if this.isToggled "Toggled" "Not Toggled"}}</p>

При каждом клике на кнопку состояние isToggled будет изменяться, и отображаемый текст будет обновляться.

Стилизация компонентов

Каждый компонент может иметь собственные стили, которые обычно располагаются в файле CSS, привязанном к компоненту. Эти стили применяются только к данному компоненту, что позволяет избежать конфликтов между стилями различных частей приложения.

Пример стилей для компонента:

app/styles/components/user-profile.css

.user-profile {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

Такие стили будут применяться только к компоненту user-profile, не влияя на другие части интерфейса.

Компоненты с состоянием

Иногда компоненты требуют управления состоянием, которое сохраняется в их локальной области видимости. Это можно реализовать с помощью внутренних свойств и методов. Например, можно создать компонент, который отслеживает состояние ввода данных:

import Component from '@glimmer/component';

export default class FormComponent extends Component {
  name = '';

  updateName(event) {
    this.name = event.target.value;
  }
}

Шаблон компонента будет использовать локальное состояние:

<input type="text" {{on "input" this.updateName}} />
<p>Entered name: {{this.name}}</p>

В этом примере компонент обновляет свой локальный стейт name при каждом вводе текста в поле.

Сложные компоненты

Компоненты могут взаимодействовать друг с другом, передавая данные или вызывая действия. Ember поддерживает вложенные компоненты, где один компонент может быть вложен в другой. Например, компонент post может включать в себя компонент comment:

app/templates/components/post.hbs

<div class="post">
  <h3>{{this.args.title}}</h3>
  <p>{{this.args.body}}</p>

  <Comment @postId={{this.args.id}} />
</div>

app/templates/components/comment.hbs

<div class="comment">
  <h4>Comment</h4>
  <textarea {{on "input" this.updateComment}}></textarea>
</div>

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

Заключение

Создание и регистрация компонентов в Ember.js — это ключевая часть работы с фреймворком. Используя систему компонентов, можно создать модульные, повторно используемые части интерфейса, которые инкапсулируют свою логику и стили. Этот подход позволяет не только улучшить структуру приложения, но и облегчить процесс разработки и тестирования.

Оглавление