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>

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


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


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


{{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.)