Learning Ember.js Part 4: Models

In my previous post, I gave a brief overview of how handlebars templates are handled in an Ember application. With this as well as basic routing out of the way, we can now move on towards concepts that will allow our applications to do more than simply display static html attributes to a screen. In this post, I will be introducing the concept of Models in Ember.js. As in my previous post, I will continue to demonstrate this topic using the application aptly titled blog-demo.

Ember Data

Ember Data is a library built for managing data models in Ember, and is included by default when a new Ember project is created using the Ember CLI. Ember Data handles the connection between the Ember application and the host server and can be configured to communicate to almost any form of back-end API. While it can be difficult to learn at first, Ember Data is designed to avoid the complexity creep that can occur using more traditional client-server connection technologies such as AJAX.

Ember Models

In Ember, Models are essentially objects used to define the attributes, relationships and behaviors of data. A model’s attributes refer to specific subsets of data within the object (for example, a person object would have first name and last name attributes). We can also define an attribute’s JavaScript data type within the model (for example, a first name would be a String data type). Finally, a relationship within a model essentially describes how different objects relate to one-another (for example a guest list model could contain references to multiple person objects).

Models tend to represent persistent data, meaning that any changes a user makes to the model should ideally be stored somewhere even after the user leaves the application or closes their browser. As such models are often loaded to and from a server handling some sort of database connection using JSON formatting.

An example of a model representing a person object

Records

A record is simply a single instance of an Ember model. The record is retrieved and defined using the model type (E.g. “Person”) and the unique identifier or ID used to distinguish individual database entries (E.g. Id = 1). The Id used can be the same as the one used server-side, or can be unique to the client-side application.

Transforms

Transforms can be used to convert data received from the server to a different data type to be used by the client-side front-end of your application. To invoke a transform simply enter a data type that differs from the data type received from the server as a parameter of the attr( ) function inside of the model.

The above example demonstrates a boolean transform. This will convert the Strings “true” or “t”, or the number 1 into a boolean value of true. Anything other than the above values will be converted into a boolean value of false (Note: this example is not actually used in the blog-demo application and is for demonstrative purposes only).

The Model Hook

The Model Hook refers to the process of calling the model( ) function in the route configuration of a given route and declaring a specific location from which to retrieve the data.

The example above is the routes/helloworld.js created when we created the helloworld route (see here). I have added a simple model hook which will return an array of all available person objects as defined be the person model (shown above under Ember Models).

Results

Given the setup shown in the examples above, all we need now is a server connection from which to get the appropriate data. For this demo, I have created a test connection using Mirage. Mirage allows us to simulate a back-end connection without fully implementing a proper server-side application.

Above is the sample data which will be used to test the person model.

Finally we add functionality to our helloworld template allowing us to display the results to the screen using a simple handlebars for-each loop (above). The final results of this work can be seen below.

This has been a simple introduction to Models in Ember.js. Thanks again for taking the time to read this post.

Previous (Ember Templates)

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.