避免 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 中，bootstrap 规则不再适用并且列表组的样式错误。

如果我将组件标签更改为 a，并从组件模板中删除 link-to，我将失去 link-to 的灵活性 - 我不知道如何设置属性(href, class) 在包含标签中。

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

Answer 1

我自己没有尝试过，但显然您可以通过扩展 Ember.LinkComponent 创建自定义 link 组件。像这样的东西可能有用...

// 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"}}

Avoid ember to wrap my component