Bind Data to Your Web Forms with EmberJS Models

WEBINAR:On-Demand

Recently I made a life change. After 20 years of doing the 9 to 5 routine, I left my lucrative job as an IT advisor for the Federal Government to spend more time pursuing my varied interests. I like to say that I'm retired, but I am still shopping around for interesting contract gigs. In the field of Web development, EmberJS is a framework that keeps coming up time and time again. Its ability to manage complexity in modern web applications, along with its integrated development toolkit that enables rapid iteration, have strongly ingratiated it with developers worldwide.

What is a Model?

If you've ever heard of Model-View-Controller (MVC), The Model of EmberJS is exactly what you think it is. For those of you who are not familiar with MVC, it's a common application architecture that divides an app into three interconnected parts. The MVC design pattern decouples the three major components of an application by allowing for efficient code reuse and parallel development.

With respect to data, it is separated into internal representations of information (Models) as well as how information is presented to the user (Views). In EmberJS, the Ember Data library is responsible for retrieving models from your server as JSON, saving updates back to the server, and creating new models in the browser.

Ember Data is based on the adapter pattern, so that it can be configured to work with many different kinds of backends. There are adapters for different many types of servers that save you from writing networking code.

Setting the Model

In Ember, the data model is loaded by the page's route handler. It does so via a special function called model(). The model() function acts as a hook that is invoked by Ember at different times in the app life cycle. For instance, the model() function we're going to add to our rentals route handler will be called when the user navigates to the rentals page via the "http://localhost:4200" or "http://localhost:4200/rentals" URL.

Open the rentals.js file, located in the app/routes directory, in your favorite editor, locate the export default Route.extend({ }) line, and add the model() function within the curly braces ({}). Then, return an array of rental objects from the model() function:

Accessing Model Attributes

In the rentals page template - sakila-video\app\templates\rentals.hbs - we can reference the model attribute to display our list of rentals. Here, we'll use a common Handlebars helper called {{each}}. This helper is utilized to iterate over each of the rental objects in our model.

Going Forward

Now that we've got our videos appearing on the rentals page, we can shift our focus onto beautifying and formatting the list. We'll accomplish that using a combination of CSS as well as Helpers.

Rob Gravelle resides in Ottawa, Canada. His design company has built web applications for numerous businesses and government agencies. Email him.

Rob's alter-ego, "Blackjacques", is an accomplished guitar player, who has released several CDs and cover songs. His band, Ivory Knight, was rated as one of Canada's top hard rock and metal groups by Brave Words magazine (issue #92).

IT Solutions Builder
TOP IT RESOURCES TO MOVE YOUR BUSINESS FORWARD

Which topic are you interested in?

Mobile

Security

Networks/IoT

Cloud

Data Storage

Applications

Development

IT Management

Other

What is your company size?

What is your job title?

What is your job function?

Searching our resource database to find your matches...

Web Development Newsletter Signup

Advertiser Disclosure:
Some of the products that appear on this site are from companies from which QuinStreet receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. QuinStreet does not include all companies or all types of products available in the marketplace.

Thanks for your registration, follow us on our social networks to keep up-to-date