no-args-paths.md

October 23, 2019 ยท View on GitHub

no-args-paths

Arguments that are passed to components are prefixed with the @ symbol in Angle bracket syntax. Ember Octane leverages this in the component's templates by allowing users to directly refer to an argument using the same prefix:

<!-- todo-list.hbs -->
<ul>
  {{#each @todos as |todo index|}}
    <li>
      {{yield (todo-item-component todo=todo) index}}
    </li>
  {{/each}}
</ul>

We can immediately tell now by looking at this template that @todos is an argument that was passed to the component externally. This is in fact always true - there is no way to modify the value referenced by @todos from the component class, it is the original, unmodified value.

Examples

This rule forbids the following:

{{this.args.foo}}
{{args.foo}}

{{my-helper this.args.foo}}
{{my-helper (hash value=this.args.foo)}}

<MyComponent @value={{this.args.foo}} />
<div {{my-modifier this.args.foo}}></div>

This rule allows the following:

{{my-helper this.args}}
{{my-helper (hash value=this.args)}}

{{@foo}}
<MyComponent @value={{@foo}} />
<div {{my-modifier @foo}}></div>

Migration

  • find in templates this.args. replace to @

References