{{# link-to}} ломает семантический интерфейс

Question

У меня есть шаблон, в котором я отображаю каждое событие как карточку, а элементы карточек либо имеют ссылки, либо нет. Для ссылок на другие маршруты я использую помощник link-to, но он нарушает макет карты семантического интерфейса пользователя. https://semantic -ui.com / просмотров / card.html

Карта отлично подойдет, если я уберу ссылку на теги. Я что-то здесь упускаю или есть лучший способ сделать это? Код выглядит следующим образом:

<div
class="ui card {{unless isWide 'event fluid' 'thirteen wide computer ten wide tablet sixteen wide mobile column'}}">
{{#unless isWide}}
  {{#link-to 'public' event.identifier}}
    <div class="ui fluid image">
      {{widgets/safe-image src=(if event.originalImageUrl event.originalImageUrl event.originalImageUrl)}}
    </div>
  {{/link-to}}
{{/unless}}
{{#link-to 'public' event.identifier}}
  <div class="ui main content">
    {{#smart-overflow class='header'}}
      {{event.name}}
    {{/smart-overflow}}
    <div class="meta">
      <span class="date">
        {{moment-format event.startsAt 'ddd, MMM DD h:mm A'}}
      </span>
    </div>
    {{#smart-overflow class='description'}}
      {{event.shortLocationName}}
    {{/smart-overflow}}
  </div>
{{/link-to}}
<div class="extra content small text">
  <span class="right floated">
    <i role="button" class="share alternate link icon" {{action shareEvent event}}></i>
  </span>
  <span>
    {{#if hasBlock}}
      {{yield}}
    {{else}}
      {{#each tags as |tag|}}
        <a>{{tag}}</a>
      {{/each}}
    {{/if}}
  </span>
</div>

Answer 1

всегда помните, что если у вас есть что-то вроде:

{{#what-ever}}
    <whatevertag class='wrapper'>
        ... whatever inside
    </whatevertag>
{{/what-ever}}

Вы, вероятно, должны упростить это до:

{{#what-ever tagName='whatevertag' class='wrapper'}}
    ...whatever
{{/what-ever}}

то же самое при создании компонента

{{!-- mycomponent.hbs --}}
<whateverTag class='my-component'>
    ...my component stuff
</whateverTag>
{{!-- EOF --}}

Вы, вероятно, должны упростить его до

{{!-- mycomponent.hbs --}}
...my component stuff
{{!-- EOF --}}

// mycomponent.js
export default Ember.Component.extend({
    tagName: 'whateverTag',
    classNames: ['my-component'],
});

Это избавит вас от бесполезных / неиспользуемых обёрток div и некоторых проблем с dom / css / css-framewroks

Answer 2

Я не использовал semantic-ui, но у меня была, как мне кажется, та же проблема со стандартными {{link-to}} помощниками, генерирующими якорные теги там, где я не хочу, чтобы они были.

См. Раздел «Предоставление имени тега» документа для {{link-to}} здесь . Помощник {{link-to}} по умолчанию вставляет тег <a>, поэтому фрагмент из приведенного выше примера будет выглядеть примерно так после пост-рендера:

<a class="stuff" href="stuff" >
  <div class="ui main content">
      <!-- Smart overflow thing -->
    <div class="meta">
      <span class="date">
        01/01/0001
      </span>
    </div>
      <!-- Smart overflow thing -->
  </div>
</a>

Обратите внимание, что все это заключено в теги привязки, сгенерированные хелпером link-to. Если это не тот макет, с которым хорошо будет работать semantic-ui, вы можете сделать что-то вроде этого:

{{#link-to 'public' tagName="li"}}
    Your other stuff here
{{/link-to}}

... где tagName - это любой тег, который будет взаимодействовать с макетом semantic-ui.