javascript - 在 Emberjs/handlebars 中为 html 元素定义 ID 失败

Question

我这里有以下问题:

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

所以我想在结果元素中有一个元素(链接呈现为 <a href="">...</a>)，其 ID 为 aId。但是该元素在呈现的 HTML 中不包含所需的 id。像这样:

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

有什么想法吗？

Answer 1

在 Ember 中，bind-attr 不应在您的 link-to 帮助中使用，因为它只能在 html 元素中使用:

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

在 Handlebars 助手内部，您只需直接定义属性。

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

如果缺少引号，则该属性不会呈现到 HTML 中。

但是你还需要重新打开LinkView:

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

See similar question here.

And the Ember docs here.