{{#link-to}} 破坏语义 UI答案

【问题标题】：{{#link-to}} breaks Semantic UI{{#link-to}} 破坏语义 UI
【发布时间】：2018-07-04 10:25:28
【问题描述】：

我有一个模板，我将每个事件显示为一张卡片，卡片的元素要么有链接，要么没有链接。对于其他路线的链接，我使用了 link-to 帮助程序，但它破坏了语义 UI 卡布局。 https://semantic-ui.com/views/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>

【问题讨论】：

link-to 助手添加了一个a 标记，这可能会破坏预期的元素顺序（div.card > a > div.content > img 而不是div.card > div.content > img）。因此尝试将link-to's 放在内容 div 中 (div.card > div.content > a > img)。

标签： ember.js semantic-ui link-to

【解决方案1】：

我没有使用语义 ui，但我猜想与默认的 {{link-to}} 助手在我不希望它们出现的位置生成锚标记时存在相同的问题。

请参阅文档的“提供 tagName”部分以获取 {{link-to}} here。 {{link-to}} 助手默认插入一个 <a> 标记，因此您上面示例的 sn-p 看起来像这样的后期渲染：

<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>

请注意，它都包含在由链接到帮助程序生成的锚标记中。如果这不是语义 UI 可以很好地使用的布局，您可以执行以下操作：

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

...其中 tagName 是与语义 UI 布局协作的任何标签。

【讨论】：

【解决方案2】：

永远记住，如果你有类似的东西：

{{#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 问题

【讨论】：