在 {{#linkTo}} 助手 <a> 上设置自定义数据属性标签 [英] Set custom data- attributes on {{#linkTo}} helper &lt;a&gt; tag

问题描述

如何在 {{#linkTo}} 助手上设置自定义 data- 属性?我想用这个:

How can I set custom data- attribute on the {{#linkTo}} helper? I want use this:

{{#linkTo "foo" data-toggle="dropdown"}}foo{{/linkTo}}

结果应该是这样的:

<a id="ember323" class="ember-view active"  data-toggle="dropdown" href="#/foo/123">foo</a>

但它看起来像:

<a id="ember323" class="ember-view active"  href="#/foo/123">foo</a>

我该怎么做?

推荐答案

您可以这样做的一种方法是扩展您的 Ember.LinkComponent 以了解新属性:

A way you could do this is to extend your Ember.LinkComponent to be aware of the new attribute:

Ember.LinkComponent.reopen({
  attributeBindings: ['data-toggle']
});

然后你可以在你的 {{#link-to}} 助手中使用它:

And then you can use it in your {{#link-to}} helper:

{{#link-to 'foo' data-toggle="dropdown"}}Foo{{/link-to}}

这将导致:

<a id="ember262" class="ember-view active" href="#/foo" data-toggle="dropdown">Foo</a>

而且由于 attributeBindings 是一个数组，您可以在其中放置您可能需要的多个属性:

And since attributeBindings is an array your can put multiple attributes there that you might need:

attributeBindings: ['data-toggle', 'foo', 'bar']

希望有帮助.

这篇关于在 {{#linkTo}} 助手 <a> 上设置自定义数据属性标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！