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.

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