css - 避免 ember 包裹我的组件

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，类）。

看来我不能为此使用 Ember 组件？或者有没有办法告诉 ember no 将我的组件包装在 adiv或其他任何东西中：为了使 CSS 工作，不得修改标记结构。

score 1 · Accepted Answer

我自己没有尝试过，但显然您可以通过扩展来创建自定义链接组件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"}}

1 回答 1