(For more resources related to this topic, see here.)
Introduction to Ember.js
MVC stands for model-view-controller. This kind of structure makes it easy to make modifications or refactor changes to any part of your code. It will also allow you to adhere to Don’t Repeat Yourself (DRY) principles. The model is responsible for notifying associated views and controllers when there has been a change in the state of the application. The controller sends CRUD requests to the model to notify it of a change in state. It can also send requests to the view to change how the view is representing the current state of the model. The view will then receive information from the model to create a graphical rendering.
If you are still unclear on how the three parts interact with each other, the following is a simple diagram illustrating this:
Ember.js decouples the problematic areas of your frontend, enabling you to focus on one area at a time without worrying about affecting other parts of your application. To give you an example of some of these areas of Ember.js, take a look at the following list:
- Navigation : Ember’s router takes care of your application’s navigation
- Auto-updating templates : Ember view expressions are binding-aware, meaning they will update automatically if the underlying data ever changes
- Data handling : Each object you create will be an Ember object, thus inheriting all Ember.object methods
- Asynchronous behavior : Bindings and computed properties within Ember help manage asynchronous behavior
How to set up Ember.js
index.html is a basic HTML index file that will display information in the user’s browser. We will be using this file as the index page of the sample application that we will be creating.
We create a namespace called MovieTracker where we can access any necessary Ember.js components. Initialize() will instantiate all the controllers currently available with the namespace. After that is done, it injects all the controllers onto a router.
We then set ApplicationController as the rendering context of our views. Your application must have ApplicationController, otherwise your application will not be capable of rendering dynamic templates.
Router in Ember is a subclass of the Ember StateManager. The Ember StateManager tracks the current active state and triggers callbacks when states have changed. This router will help you match the URL to an application state and detects the browser URL at application load time. The router is responsible for updating the URL as the application’s state changes.
When Ember parses the URL to determine the state, it attempts to find Ember.Route that matches this state. Our router must contain root and index. You can think of root as a general container for routes. It is a set of routes.
An Ember view is responsible for structuring the page through the view’s associated template. The view is also responsible for registering and responding to user events.
ApplicationView we are creating is required for any Ember application. The view we created is associated with our ApplicationController as well. The templateName variable is the name we use in our index.html file. The templateName variable can be changed to anything you wish.
Creating an Ember Object
An object or a model is a way to manage data in a structured way. In other words, they are a way of representing persistent states in your application. In Ember.js, almost every object is derived from the Ember.Object class. Since most objects will be derived from the same base object, they will end up sharing properties with each other. This allows the observation and binding to properties of other objects.