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

Question

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

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


        

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