Extending {{link-to}} with Ember-cli

Question

This question is similar to the unanswered Extending link-to.

I'm trying to extend the {{link-to}} helper to output additional attribute bindings. However the attributes do not appear in our HTML. Heres what we have:

//views/link-to.js (normally coffeescript)
import Ember from 'ember'

var LinkToView = Ember.LinkView.reopen({
  attributeBindings: ['data-toggle', 'data-placement', 'title']
});

export default LinkToView;

The rendered output is this:

define('app/views/link-to', ['exports', 'ember'], function (exports, Ember) {

  'use strict';

  var LinkToView;

  LinkToView = Ember['default'].LinkView.reopen({
    attributeBindings: ['data-toggle', 'data-placement', 'title']
  });

  exports['default'] = LinkToView;

});

When its called and its rendered output:

// Any .hbs file
{{#link-to 'account' 
    class='header-link' 
    data-toggle='tooltip' 
    data-placement='right' 
    title='Account'
}}
    <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
{/link-to}}

// Rendered...
<a id="ember615" class="ember-view header-link" href="/account"     title="Account">             
    <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
</a>

Where are we going wrong? I know it has something to do with the resolver or how we're calling it.

Thanks.

Not sure you can, but what you could do is create a helper and/or component for that. If you are interested in that approach let me know I ll write up an answer. — Patsy Issa, Jul 22 '15 at 17:31
I stumbled across this [answer](http://stackoverflow.com/a/18400730/1401094) does it work for you? — Patsy Issa, Jul 22 '15 at 21:40
Not really. Thats largely what I'm already doing. However I think the problem has something to do with how Ember-CLI resolves things. — JDillon522, Jul 22 '15 at 21:48

score 8 · Answer 1 · answered Feb 04 '16 at 22:41

8

For Ember 2.0+

Create directory app/reopens

Create file app/reopens/link-component.js

import Ember from 'ember'; 
Ember.LinkComponent.reopen({
  attributeBindings: ['data-variation', 'data-offset', 'data-content','data-any']
});

in app.js import it

import LinkComponent from './reopens/link-component';

That's all. For ember-cli < 2.0 replace LinkComponent with LinkView

answered Feb 04 '16 at 22:41

Dima Magunov

163
3
9

That is great, can you please tell me how we can change the href, for example I want to execute some JS (open a tab) when any link is clicked – Aamir Mahmood Feb 22 '16 at 15:12
Thanks a ton for this! – Arrowcatch Jun 17 '16 at 12:12

score 1 · Accepted Answer · answered Aug 06 '15 at 14:21

1

So its probably not the rightest answer, but I discovered on accident that if you put any sort of extensions or overrides like this into route/applaction.js's beforemodel hook that it works perfectly:

// routes/application.js
export default Ember.Route.extend({
  beforeModel: function() {
    Ember.LinkView.reopen({
      attributeBindings: ['data-toggle', 'data-placement', 'title']
    });
  })
});

answered Aug 06 '15 at 14:21

JDillon522

19,046
15
47
81

technically you don't need to do this inside the route's business logic, in fact I would argue that makes it a bit more confusing since you're not doing anything with a model (im being pedantic). – Daniel Lizik Sep 19 '19 at 03:09

score 0 · Answer 3 · answered Jan 30 '17 at 19:07

File: app/reopens/link-component.js

If this can help others for generic data-* for Ember 2.x .

import Ember from 'ember';

Ember.LinkComponent.reopen({
    init: function() {
        this._super();
        var self = this;

        // bind attributes beginning with 'data-'
        Object.keys(this).forEach(function(key) {
            if (key.substr(0, 5) === 'data-') {
                self.get('attributeBindings').pushObject(key);
            }
        });
    },
});

This no longer works for Ember >= 2.8 because attributeBindings are `Object.seal`ed. — typeoneerror, Jan 30 '18 at 07:32

Extending {{link-to}} with Ember-cli

3 Answers3