When to use this.value or @value in templates?

Last reviewed on June 22, 2019 with Ember Octane

Given the following component snippet:

<Input @value={{@title}} />

<p>Available tags: {{tags}}</p>

<ul>
  {{#each this.model as |post|}}
    <li>
      <LinkTo @route="posts.post" @model={{post.id}}>
        <PostView @post={{post}} @showBody={{false}} />
      </LinkTo>
    </li>
  {{/each}}
</ul>

{{this.value}}

{{this.model}} refers to the model property on the component class

{{@value}}

{{@title}} refers to an argument passed into this component (which would turn into @value inside the Input component)

{{value}}

{{post}} refers to the post local variable in the loop, but it would otherwise refer to a helper – just like what happens with {{tags}}

In earlier Ember versions all of these were written as {{value}}, which was confusing and error prone. It’s much easier now to see what is an argument, a property or a helper at a glance.

After a few RFCs the template linter was updated to check on these.

Enjoyed this article? Don't miss my next one!

Join other 3800+ smart developers.

(Time is our most valuable asset. I promise never to waste yours.)