`this.something = 'else'` vs `this.set('something', 'else')` in Ember
I’ve been getting deeper into Ember.js in my new job, and I learn something new every day. Sometimes, things you’ve been using here and there are a bit mysterious. Eventually, either you or someone else notices them and raises insightful questions, like Michal asked on Ember’s Discord channel. The question was basically this:
What’s the difference between
this.something = 'else'
andthis.set('something', 'else')
in tests?
The answer is surprisingly simple (at the surface, we don’t need to get deep into Ember’s reactivity): this.set
is the way you have to trigger re-render in test. For example, if you set a value with this.value = 'test'
and render a component that will use that this.value
, changing the value of this.value
now will not re-render the partial. If, instead, you set that value with this.set('value', 'test')
, whenever you change it again with this.set('value', 'something else')
, the template will automatically re-render.
Small caveat (like everything in like): re-rendering will only occur if the value you are reassigning is different that the value previously there, as it seems.