En En

Привязка атрибутов элемента


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

Например, представьте, что ваш контроллер имеет свойство, которое содержит URL изображения:

<div id="logo">
  <img src={{logoUrl}} alt="Logo">
</div>

Это генерирует следующий код HTML:

<div id="logo">
  <img src="http://www.example.com/images/logo.png" alt="Logo">
</div>

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

<input type="checkbox" disabled={{isAdministrator}}>

Если isAdministrator = true, Handlebars представит следующий элемент HTML:

<input type="checkbox" disabled>

Если isAdministrator = false, Handlebars представит следующее:

<input type="checkbox">

Добавление атрибутов данных

По умолчанию хелперы и компоненты не принимают атрибуты данных. Например,

{{#link-to "photos" data-toggle="dropdown"}}Photos{{/link-to}}

{{input type="text" data-toggle="tooltip" data-placement="bottom" title="Name"}}

генерирует следующий код HTML:

<a id="ember239" class="ember-view" href="#/photos">Photos</a>

<input id="ember257" class="ember-view ember-text-field" type="text"
       title="Name">

Чтобы разрешить поддержку атрибутов данных, нужно добавить компоненту привязку к атрибуту, например, Ember.LinkComponent или Ember.TextField для определенного атрибута:

Ember.LinkComponent.reopen({
  attributeBindings: ['data-toggle']
});

Ember.TextField.reopen({
  attributeBindings: ['data-toggle', 'data-placement']
});

Теперь тот же шаблон, что мы видели выше, отобразит следующий код HTML:

<a id="ember240" class="ember-view" href="#/photos" data-toggle="dropdown">Photos</a>

<input id="ember259" class="ember-view ember-text-field"
       type="text" data-toggle="tooltip" data-placement="bottom" title="Name">

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

  1. Николай 25 ноября 2016, 05:57 # 0
    Добрый день! У меня такая беда
    <a id="ember563" class="ember-view loading" href="#"> </a>
    Появляется после того как нажал на ссылку в коллекции списка.
    <ul>
      {{#each model as |posts|}}
        <li>
        {{#link-to 'posts.show' posts.slug}}
          {{posts.title}}
        {{/link-to}}
        </li>
      {{/each}}
    </ul>
    
    Откуда он его берет? почему дублирует? С каждым нажатием на новую ссылку со списка пустых ссылок становиться больше.
    Помогите разобраться.
    Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.