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

Tracked and Computed Property

Explore how to implement tracked and computed properties within Ember.js controllers to create reactive user interfaces. Learn to build a counter with increment, decrement, and double functionalities using tracked properties and computed values. Understand how to consolidate actions with arguments and maintain up-to-date UI rendering automatically.

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. ...