template-no-chained-this.md

ember/template-no-chained-this

💼 This rule is enabled in the following configs: strict-gjs, strict-gts.

💼 This rule is enabled in the following configs: strict-gjs, strict-gts.

Disallow chained property access on this.

Accessing deeply nested properties through this (like this.user.name) in templates makes components harder to refactor and test. It also creates tight coupling between the template and the component's internal structure. Use local variables or computed properties instead.

Rule Details

This rule disallows chaining property access on this in templates (e.g., this.foo.bar).

Examples

Incorrect ❌

<template>
  {{this.user.name}}
</template>

<template>
  {{this.model.user.firstName}}
</template>

<template>
  <div>{{this.data.items.length}}</div>
</template>

Correct ✅

<template>
  {{this.userName}}
</template>

<template>
  {{get this.user "name"}}
</template>

<template>
  {{userName}}
</template>

Related Rules

• template-no-implicit-this

References

• Ember Best Practices - Component Design
• ember-template-lint: no-this-in-template-only-components