apiKey

authDomain

databaseURL

projectId

storageBucket

messagingSenderId

appId

Gain insights into Ember.js, explore templates, components, routing, and testing. Delve into building a complete e-commerce app and integrate with Firebase to leverage Ember's features robustly.

tarball.tar.gz

FirstApp

templateIntro

stylingtemplate

addingbootstrap

completehomepage

Challenge

Settinguproutes

Modifyingroutes

notfoundroute

nestedroutes

dynamicroutes

categoryroute

addroute

components

controller

Firebase

helpers

services

tests

Ember.js is a JavaScript framework for building scalable web applications with discrete components.

In this course, practicing JavaScript developers will be introduced to the Ember.js framework. You’ll start by setting up Ember and creating a project application. You’ll continue with the building blocks of Ember.js, including templates, components, routing, services, helpers, Ember Data, and testing. You’ll then use the components to build a complete e-commerce application from scratch. Each lesson will add more depth and functionality to your application with hands-on exercises. Finally, you’ll integrate the application with Firebase.

By the end of the course, you’ll be prepared to leverage Ember’s key features to develop robust web applications.

Developing Robust Web Applications with Ember.js

# 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:

{{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:


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 the tracked property from the glimmer/tracking path.
- **Line 7**: We use a `@tracked` decorator to mark the `count` property as `tracked`. Initially, we set `count` as `0`.
- **Lines 9–12**: We create the `increment` event handler.
  - **Line 11**: We add `1` in the `count` property.
- **Lines 14–17**: We create the `decrement` event handler.
  - **Line 16**: We subtract `1` from the `count` property.

Here’s how the output of the code above should look like:


Learn to use tracked and computed properties in Ember controllers.

Course Overview

Getting Started with Ember

Templates in Ember

Routing in Ember

Nested Routing

Components in Ember

Controllers in Ember

Ember Data

Integration with Firebase

Helpers

Services in Ember

Testing in Ember

Conclusion

Ember.js Assessment

Tracked and Computed Property

Tracked property