在{{#linkTo}} helper <a>标记上设置自定义数据属性

Question

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

{{#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>

我怎样才能做到这一点？

Answer 1

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

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

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

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

这将导致:

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

因为attributeBindings是一个数组,你可以在那里放置你可能需要的多个属性:

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

希望能帮助到你.

Answer 2

@intuitivepixel

谢谢

你帮了很多忙.有了这些信息,我就使用了LinkView,并且能够找到一个通用的解决方案:

Em.LinkView.reopen({
    init: function() {
        this._super();
        var self = this;
        Em.keys(this).forEach(function(key) {
            if (key.substr(0, 5) === 'data-') {
                self.get('attributeBindings').pushObject(key);
            }
        });
    }
});