« All deprecation guides

Deprecation Guide for Property Fallback Lookup

until: 4.0.0
id: this-property-fallback

It is currently possible to reference properties on a component without a preceding this. For instance, this component:

export class MyComponent extends Component {
  name = 'Tomster';
Hello, {{name}}!

Would render the following HTML:

Hello, Tomster!

This style of looking up properties is known as "property fallback", and has the potential to collide with other types of values. For instance, if there was a component or helper named name, it would be rendered instead of the property. The alternative way to lookup properties is with a preceding this:

Hello, {{this.name}}!

This style does not have any ambiguity, since it's clear that we're looking up the property on this instance of the component, and not the global helper/component. Property fallback has been deprecated in favor of this style in general.

Note that property fallback can occur anywhere that a property can be referenced. Here are some examples of properties referenced using property fallback:

{{my-helper someProp}}
{{if (my-other-helper someProp)}}
<MyComponent @arg={{someProp}} @arg2={{some.nested.prop}} />

And here are the same property lookups updated to use this:

{{my-helper this.someProp}}
{{if (my-other-helper this.someProp)}}
<MyComponent @arg={{this.someProp}} @arg2={{this.some.nested.prop}} />