Defining an ID for html element in Emberjs/handlebars fails

Question

I have following issue here:

<ul class="aClass">
  {{#if something}}
  <li>{{#link-to "blub" bind-attr data-testid=aID}}{{loc "blub"}}{{/link-to}}</li>
  {{/if}}
</ul>

so i want to have an element(the link-to is rendered to <a href="">...</a>) in the resulting element with the id aId. But the element does not contain the wanted id in the rendered HTML. something like this:

<a href="" data-testid="aID">...</a>

any ideas?

Answer 1

Try using quotes:

{{#link-to "blub" bind-attr data-testid="aID"}}{{loc "blub"}}{{/link-to}}

A lack of quotes will cause Ember to try a property lookup on the current view context, instead of just spitting out a string as you'd like it to.

Answer 2

In Ember, bind-attr shouldn't be used inside of your link-to help as that should only be used inside of html elements:

<a {{bind-attr href=myLink}}>My Link</a>

Inside of Handlebars helpers, you just define the property directly.

{{#link-to "blub" data-testID="aID"}}{{loc "blub"}}{{/link-to}}

The attribute is not rendered into the HTML if the quotes are missing.

But you also need to reopen the LinkView:

Ember.LinkView.reopen({
    attributeBindings: ['data-testID']
});

See similar question here.

And the Ember docs here.