Overriding LinkComponent EmberJs 1.13.15

Question

Im Using EmberJs 1.13.15 and Ember-CLI , i was trying to slightly modify the main LinkComponent behavior by adding the following code:

app/components/nav-link-to.js:

import Ember from 'ember';

export default Ember.LinkComponent.extend({
  tagName: 'li'
});

app/templates/components/nav-link-to.hbs:

<a href="">{{yield}}</a>

and im using this component in:

app/templates/nav-bar.hbs:

<ul class="nav navbar-nav">
   {{#nav-link-to 'index'}}Home{{/nav-link-to}}
</ul>

but whenever i open the nav-bar template in the browser nothing shows up and in ember inspector's console it shows the following error

Uncaught TypeError: Cannot read property 'slice' of undefined

Any help?

Thanks in advance.

I just spun up a new Ember CLI project, created the component (with matching name), added it to my application template, and ran the application with no issues. Is there any more information in the stack trace for the error that you're getting? — Justin Niessner
If the tagName is the only change, you can also do {{#link-to 'index' tagName="li"}}. — locks
@JustinNiessner unfortunately i can't find anything except for function calls in the stack trace, I think the problem might be with my version, which ember version are you using? — Abkreno

murli2308 murli2308 · Accepted Answer · 2017-04-03T13:17:13

You will have to add the params in your component. Also you will have to call this._super in init method of component. Below is the working component code for extended link-to.

import Ember from 'ember';
export default Ember.LinkComponent.extend({
    tagName: 'li',
    positionalParams: 'params',
    init: function() {
      this._super(...arguments);
    },
    didReceiveAttrs: function() {
      this.attrs.params = this.get('params');
      this.attrs.hasBlock = true;
    }
});

Overriding LinkComponent EmberJs 1.13.15

1 Answers