Avoid ember to wrap my component

0
votes

This is my component:

{{#link-to routeName class="list-group-item"}}
  <i class="fa {{icon}} fa-fw"></i>&nbsp; {{text}}
{{/link-to}}

Which I use:

<div class="list-group">
  {{icon-link routeName="my-account" icon="fa-user" text="Personal details"}}
...
</div>

The expected html is:

<div class="list-group">
  <a class="list-group-item" href="xxx">
    <i class="fa fa-user fa-fw"></i>&nbsp; Personal details
  </a>
...
</div>

But because ember wraps the components in a div, the bootstrap rules do not apply anymore and the list-group has a wrong style.

If I change the component tag to a, and remove link-to from the component template, I loose the flexibility of link-to - and I do not know how to set attributes (href, class) in the containing tag.

It seems I can not use an Ember component for this then? Or is there a way to tellink ember no to wrap my component in a div, or anything else really: in order for the CSS to work, the markup structure must not be modified.

1
cssember.jsember-components

1 Answers

1
votes

I've not tried this myself but apparently you can create custom link-to components by extending Ember.LinkComponent. Something like this might work...

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

Here's a related blog post which may help you also - http://til.hashrocket.com/posts/faef1058c3-inheriting-from-linkcomponent-in-ember-is-amazing