Component how to modify it's own attributs value?

1

Hi, I need your help for something really easy i think. But i can’t get it work. I have a component with one attribute and one content.

{{#materialize-navbar-scrollspy-item anchor=category.name}}{{category.name}}{{/materialize-navbar-scrollspy-item}}

As you can see, content and anchor attribute come from the same variable but i want to sanitize the attribute’s value.

I tried this :

import Ember from 'ember';

export default Ember.Component.extend({
	tagName: 'li',
	__init : function() {
    	var anchor = this.get('anchor');
    	this.set('anchor', '#' + anchor.replace(" ","-"))
	}.on('didInsertElement')
});

With this code the value of content is also modify. I tried to call:

this.get('anchor').copy()

but with this value, anchor is not set .

Any Idea?

2

You can hook into didReceiveAttrs hook: JS Bin - Collaborative JavaScript Debugging

I wouldn’t mutate the attr itself, since you can’t really guarantee that the attr is mutable and goes against DDAU, but you can shadow it with an internal state prop like in my above example.

3

Yeah, this is the solution. Thank you.