Set custom data- attributes on {{#linkTo}} helper <a> tag

Question

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

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

and the result should look like this:

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

but it looks like:

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

How can I do this?

Answer 1

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']
});

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

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

This will result in:

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

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

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

Hope it helps.

Answer 2

@intuitivepixel

Thanks

U helped a lot. With that Information I've played arround with the LinkView and was able to find a generic solution:

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);
            }
        });
    }
});