Избегайте тлеющего уголька

Question

Это мой компонент:

{{#link-to routeName class="list-group-item"}}
  <i class="fa {{icon}} fa-fw"></i>&nbsp; {{text}}
{{/link-to}}

Который я использую:

<div class="list-group">
  {{icon-link routeName="my-account" icon="fa-user" text="Personal details"}}
...
</div>

Ожидаемый HTML это:

<div class="list-group">
  <a class="list-group-item" href="xxx">
    <i class="fa fa-user fa-fw"></i>&nbsp; Personal details
  </a>
...
</div>

Но поскольку ember оборачивает компоненты в div, правила начальной загрузки больше не применяются, и у группы списков неправильный стиль.

Если я изменю тег компонента на aи удалить link-to из шаблона компонента, я теряю гибкость link-to - и я не знаю, как установить атрибуты (href, class) в содержащем теге.

Кажется, я не могу использовать компонент Ember для этого тогда? Или есть способ сказать ember нет, чтобы обернуть мой компонент в divили что-то еще на самом деле: чтобы CSS работал, структура разметки не должна изменяться.

Answer 1

Я не пробовал это сам, но, видимо, вы можете создать пользовательские ссылки на компоненты путем расширения Ember.LinkComponent, Нечто подобное может сработать...

// app/components/icon-link.js

export default Ember.LinkComponent.extend({
  classNames: ["list-group-item"],

  icon: null,
  text: null,
})

...

// app/templates/components/icon-link.hbs

<i class="fa {{icon}} fa-fw"></i>&nbsp; {{text}}

...

// wherever

{{icon-link 'my-account' icon="fa-user" text="Personal details"}}

Вот соответствующее сообщение в блоге, которое также может вам помочь - http://til.hashrocket.com/posts/faef1058c3-inheriting-from-linkcomponent-in-ember-is-amazing