Search⌘ K
Home
Courses
Developing Robust Web Applications with Ember.js

Tracked and Computed Property

Learn to use tracked and computed properties in Ember controllers.

We'll cover the following...

Tracked property

Tracked properties are used as a decorator to mark a property as tracked. They’re imported from @glimmer/tracking. When a property is marked as tracked, it rerenders the DOM whenever the value of that tracked property is changed. A counter with the increment or decrement functionality needs to be tracked. This allows us to change it without having to render the DOM. Let’s create a counter layout in the practice template to learn about the tracked property:

Node.js
{{page-title "Practice"}}
<br>
<h3 >{{this.count}}</h3>
<br>
<button class= "btn btn-success"  {{on 'click' this.increment}}>+1 </button>
<button class= "btn btn-danger "  {{on 'click' this.decrement}}>-1</button>
{{!-- {{outlet}} --}}

  • Line 3: We add a count property in an h3 tag. We use this to refer to the properties from controllers.

  • Line 5: We create a button and add an increment event handler.

  • Line 6: We create a button and add a decrement event handler.

Now, let’s open the practice.js controller and add the required property and event handlers:

Javascript (babel-node)
import Controller from '@ember/controller';
import {action} from '@ember/object'
import { tracked } from '@glimmer/tracking';
export default class PracticeController extends Controller {
    @tracked count = 0;
    @action
    increment(){
        this.count = this.count+1;
    }
    @action
    decrement(){
        this.count = this.count-1;
    }
}
  • Line 3: We import
...