Autotracking is how Ember's reactivity model works - how it decides what to rerender, and when. This guide covers tracking in more depth, including how it can be used in various types of classes, and how it interacts with arrays and POJOs.
When Ember first renders a component, it renders the initial state of that component - the state of the instance, and state of the arguments that are passed to it:
app/components/hello.hbs :
{{this.greeting}}, {{@name}}!
app/components/hello.js :
import Component from '@glimmer/component';
export default class HelloComponent extends Component {
language = 'en';
get greeting() {
switch (this.language) {
case 'en':
return 'Hello';
case 'de':
return 'Hallo';
case 'es':
return 'Hola';
}
}
}
app/templates/application.hbs
<Hello @name="Free Time Learning">
When Ember renders this template, we get:
Hello, Free Time Learning!
