En En

Индивидуальная настройка элемента компонента


По умолчанию каждый компонент сопровождается элементом <div>. Если вы посмотрите на отображенный компонент в инструментах разработчика, то увидите примерно такое представление в DOM:

<div id="ember180" class="ember-view">
  <h1>My Component</h1>
</div>

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

Индивидуальная настройка элемента

Чтобы использовать какой-либо тег вместо div, создайте подкласс Ember.Component и назначьте ему свойство tagName. Это свойство может быть любым подходящим именем тега HTML5 в виде строки:

app/components/navigation-bar.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'nav'
});

app/templates/components/navigation-bar.hbs

<ul>
  <li>{{#link-to "home"}}Home{{/link-to}}</li>
  <li>{{#link-to "about"}}About{{/link-to}}</li>
</ul>

Индивидуальная настройка класса элемента

Вы можете указать класс элемента компонента в момент вызова таким же образом, как для обычного HTML-элемента:

{{navigation-bar class="primary"}}

Вы также можете указать, какие имена класса применять к элементу компонента, назначив его свойство classNames массиву строк:

app/components/navigation-bar.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['primary']
});

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

app/components/todo-item.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNameBindings: ['isUrgent'],
  isUrgent: true
});

Этот компонент отобразит следующее:

<div class="ember-view is-urgent"></div>

Если isUrgent изменится на false, тогда имя класса is-urgent будет удалено.

По умолчанию имя логического свойства пишется с тире. Вы можете настраивать применяемое имя класса, разделяя его двоеточием:

app/components/todo-item.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNameBindings: ['isUrgent:urgent'],
  isUrgent: true
});

Это отобразит такой код HTML:

<div class="ember-view urgent">

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

app/components/todo-item.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNameBindings: ['isEnabled:enabled:disabled'],
  isEnabled: false
});

Это отобразит такой код HTML:

<div class="ember-view disabled">

Вы также можете указать единственный класс, который будет добавлен, когда свойство имеет значение false, если объявите classNameBindings таким образом:

app/components/todo-item.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNameBindings: ['isEnabled::disabled'],
  isEnabled: false
});

Это отобразит такой код HTML:

<div class="ember-view disabled">

Если свойство isEnabled имеет значение true, имя класса не будет добавлено:

<div class="ember-view">

Если привязанное значение свойства — это строка, то значение будет добавлено в качестве имени класса без изменения:

app/components/todo-item.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNameBindings: ['priority'],
  priority: 'highestPriority'
});

Это отобразит такой код HTML:

<div class="ember-view highestPriority">

Индивидуальная настройка атрибутов

С помощью attributeBindings вы можете привязать атрибуты к элементу DOM, который представляет компонент:

app/components/link-item.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'a',
  attributeBindings: ['href'],
  href: 'http://emberjs.com'
});

Также можно привязать эти атрибуты к свойствам с разными именами:

app/components/link-item.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'a',
  attributeBindings: ['customHref:href'],
  customHref: 'http://emberjs.com'
});

Если атрибут — null, он не будет отображен:

app/components/link-item.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'span',
  title: null,
  attributeBindings: ['title'],
});

Этот код отобразит следующий HTML, если title (заголовок) не передается компоненту:

<span class="ember-view">

...и такой HTML, если заголовок "Ember JS" передается компоненту.

<span class="ember-view" title="Ember JS">

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

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