Extending link-to with Eember-CLI

Ember CLI
1

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.

2

Hi @joseph_dillon_522,

Did you find any answer since then?

I’m facing the same issue and I really don’t know where to put the code provided in the Ember Guides :confused:

Thanks :wink:

3

Well, I found a way to make it work by adding this to my app/app.js file:

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

Boostrap is not making any use of it for now but at least the markup is good now ^^