Избегайте ember, чтобы обернуть мой компонент

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

{{#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 для этого? Или есть способ сказать link ember no, чтобы обернуть мой компонент в div, или что-то еще на самом деле: для того, чтобы CSS работал, структура разметки не должна изменяться.


css ember.js ember-components
person blueFast    schedule 19.12.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я не пробовал это сам, но, по-видимому, вы можете создавать собственные компоненты ссылок, расширяя 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

person Keith Broughton    schedule 19.12.2015
comment
Отлично, это именно то, что я ищу! Я пытаюсь это сделать и получаю странную ошибку: Uncaught TypeError: Cannot read property 'slice' of undefined. Я дважды проверил все, и шаблон, и javascript, похоже, в порядке. Сообщение в блоге, на которое вы ссылаетесь, к сожалению, не ссылается на работающее приложение или jsbin, что очень помогло бы. - person blueFast; 22.12.2015
comment
Ничего: работает, но нужен ember~2.0.0. Дело в том, что последний ember-cli застрял на [email protected]. Вам нужно вручную обновить ember и ember-data в файле bower.json — это авантюра, поскольку есть еще 7-8 пакетов, связанных с ember, и я не уверен, что они хорошо работают вместе. Я могу сказать вам, что обновление всех пакетов, связанных с ember, до последней версии не работает. - person blueFast; 22.12.2015