💼 This rule is enabled in the 📋 template-lint-migration config.
🔧 This rule is automatically fixable by the --fix CLI option.
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:
<template>
<!-- todo-list.hbs -->
<ul>
{{#each @todos as |todo index|}}
<li>
{{yield (todo-item-component todo=todo) index}}
</li>
{{/each}}
</ul>
</template>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.
This rule forbids the following:
<template>
{{this.args.foo}}
{{args.foo}}
</template><template>
{{my-helper this.args.foo}}
{{my-helper (hash value=this.args.foo)}}
</template><template>
<MyComponent @value={{this.args.foo}} />
<div {{my-modifier this.args.foo}}></div>
</template>This rule allows the following:
<template>
{{my-helper this.args}}
{{my-helper (hash value=this.args)}}
</template><template>
{{@foo}}
<MyComponent @value={{@foo}} />
<div {{my-modifier @foo}}></div>
</template>- find in templates
this.args.replace to@