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