En En

Определение компонента


Чтобы определить компонент, запустите команду:

ember generate component my-component-name

Компоненты должны иметь как минимум один знак тире в имени. Поэтому blog-post — приемлемое имя, так же как и audio-player-controls. А post уже не подойдет. Это предотвращает конфликты с текущими или будущими именами элементов HTML, приводит компоненты Ember в соответствие со спецификацией W3C Custom Elements и гарантирует, что Ember будет автоматически обнаруживать компоненты.

Простой шаблон компонента может выглядеть так:

app/templates/components/blog-post.hbs

<article class="blog-post">
  <h1>{{title}}</h1>
  <p>{{yield}}</p>
  <p>Edit title: {{input type="text" value=title}}</p>
</article>

Учитывая шаблон выше, теперь можно использовать компонент {{blog-post}}:

app/templates/index.hbs

{{#each model as |post|}}
  {{#blog-post title=post.title}}
    {{post.body}}
  {{/blog-post}}
{{/each}}

Его модель комплектуется в hook'е model обработчика маршрута:

app/routes/index.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return this.get('store').findAll('post');
  }
});

Каждый компонент «изнутри» поддерживается элементом. По умолчанию Ember будет использовать элемент <div> для включения шаблона компонента. Если хотите узнать, как изменять области применения элемента Ember для компонента, смотрите раздел «Индивидуальная настройка элемента компонента».

Определение подкласса компонента

Часто ваши компоненты будут просто инкапсулировать определенные фрагменты шаблонов Handlebars, которые вы используете снова и снова. В таких случаях вам не нужно писать какой-либо код JavaScript. Просто определите шаблон Handlebars, как описано выше, и используйте созданный компонент.

Если вы хотите индивидуально настроить поведение компонента, то придется назначить подкласс Ember.Component. Например, вам нужен индивидуальный подкласс, если вы хотите изменить элемент компонента, реагировать на действия из шаблона компонента или вручную вносить изменения в элемент компонента с помощью JavaScript.

Ember по имени файла понимает, какой подкласс поддерживает компонент. Например, если у вас есть компонент под названием blog-post, вы создаете файл в app/components/blog-post.js. Если ваш компонент был назван audio-player-controls, то файл будет в app/components/audio-player-controls.js.

Динамическое отображение компонента

Хелпер {{component}} можно использовать, чтобы отложить выбор компонента во время работы приложения. Синтаксис {{my-component}} всегда отображает одинаковый компонент, а используемый хелпер {{component}} позволяет на ходу выбирать компонент для отображения. Это пригодится в случаях, где нужно взаимодействовать с разными внешними библиотеками в зависимости от данных. Использование хелпера {{component}} позволит вам держать разную логику разделенной.

Первый параметр хелпера — имя компонента для отображения в виде строки. Поэтому {{component 'blog-post'}} представляет собой то же самое, что и {{blog-post}}.

Истинная ценность {{component}} заключается в способности динамически выбирать компонент для отображения. Ниже приведен пример использования хелпера в качестве средства выбора различных компонентов для отображения разного рода публикаций:

app/templates/components/foo-component.hbs

<h3>Hello from foo!</h3>
<p>{{post.body}}</p>

app/templates/components/bar-component.hbs

<h3>Hello from bar!</h3>
<div>{{post.author}}</div>

app/routes/index.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return this.get('store').findAll('post');
  }
});

app/templates/index.hbs

{{#each model as |post|}}
  {{!-- either foo-component or bar-component --}}
  {{component post.componentName post=post}}
{{/each}}

Когда параметр, переданный {{component}}, имеет значение null или undefined, хелпер ничего не отображает. Когда параметр меняется, текущий отображенный компонент убирается, а новый создается и заменяет его.

Выбор разных компонентов для отображения в ответ на данные позволяет для каждого случая использовать разные шаблоны и поведение. Хелпер {{component}} — мощный инструмент для улучшения модульности кода.


Комментарии (0)

    Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.