{{#link-to}}中断语义UI
{{#link-to}}中断语义UI
提问于 2018-07-04 18: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>
回答 2
Stack Overflow用户
发布于 2018-07-16 11:52:33
我没有使用semantic-ui，但我已经遇到了默认的{{link-to}}助手在我不希望它们出现的地方生成锚标签时遇到的同样问题。
请参阅{{link-to}} here文档的“提供tagName”部分。默认情况下，{{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 helper生成的锚标记中。如果这不是semantic-ui可以很好处理的布局，您可以这样做：
{{#link-to 'public' tagName="li"}}
Your other stuff here
{{/link-to}}...where tagName是与semantic-ui布局相配合的任何标记。
Stack Overflow用户
发布于 2018-07-19 16:54:56
永远记住，如果你有这样的东西：
{{#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问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51171440
复制相关文章
相似问题
腾讯云开发者
