Cached computed property in component

1

I don’t think I’ve done one thing in Ember yet without being tripped up by something. It’s honestly maddening.

Today it’s a table component that I have that keeps caching a computed property from a model. I tried so many things to figure it out.

I set the model in the parent template handlebars “data=model”. When I change route with link-to then the model.name never changes in the component. It rerenders fine as text in the parent template. The actual table data in the component changes also.

In link-to I’ve tried setting the object and object.id. Tried all manner of this.get(‘model.name’), Ember.get(this, ‘model.name’), model.get(‘name’) in the component.

I have no idea. Can anyone point me in the right direction?

2

So random. If I put the model.name as an observer where I declare the table columns in the component then it changes.

tableColumns: Ember.computed(‘model.name’, function() {

3

I’m glad you answered your own question. It will start to gel soon. The topic of your post threw me a curve because computed’s are cached. If (model.name) never changes, you can call get(‘table…’) 1000 times, and will only execute that bit of code 1 time. By putting ‘model.name’ in the list of observed, you are effectively telling the framework when to invalidate the cache.

Another fun thing you’ll likely struggle with at least once is that the code in the computed will never run if something doesn’t get() it–either via template reference or in code. Seems like an obvious thing to say, but it’s bitten me a few times.

2 Likes