Working with Data Models and Routes in EmberJS

In modern web apps, screens have been replaced by web pages. Whereas in native applications, a screen could only be accessed once a certain action was performed by the user, URLs are somewhat more complicated due to their ability to be bookmarked, invoked directly in the browser address bar, and by virtue of their nestable path format. Inevitably, application frameworks have evolved to incorporate routers that abstract this complexity to provide developers with a means to design URL schemes that eloquently describe the user’s location within the hierarchy of the application at any given time.

Due to the prominent role that routing plays in web apps, understanding their proper usage is a fundamental core concept to understand. Yet, its mastery is one that eludes many beginners. To shed some light on the relationship between routing and a well-designed URL scheme, we’ll build a web app for a fictional video store using Ember’s outstanding routing generator.

The Sakila-video Application

If you’d like to follow along with this tutorial, you’ll need to generate the “sakila-video” application. I covered the basics of Ember installation and building an Ember App in my Developing Web Apps with EmberJS article.

I’d also like to point out that this tutorial uses the latest and greatest version of Ember – currently 2.18.0. To check which version you are running, enter ember -v at the command line.

To christen my app, I replaced the “{{welcome-page}}” handlebar label in the application template – found under app/templates/application.hbs – with the app title:

	<h1>Sakila Video</h1> 
	
	{{outlet}} 
	

The Index Route

Routes are generated using Ember CLI – the Ember Command Line Interface. We’ll want to create an index route to handle requests to the root URI (/) of our site (app). Here’s the command to generate the “index” route:

ember g route index 

Ember CLI will then produce the following output:

installing route 
	create app/routes/index.js 
	create app/templates/index.hbs 
	installing route-test 
	create tests/unit/routes/index-test.js 

An Ember route is built with three parts:

1. An entry in the Ember router (/app/router.js), which maps between our route name and a specific URI
2. A route handler file, which sets up what should happen when that route is loaded (app/routes/about.js)
3. A route template, which is where we display the actual content for the page (app/templates/about.hbs)

The Rentals Route

Now we could add some HTML markup to the index.hbs template, but instead, we’ll have this route forward to a page that shows a list of movies that are available for rent.

For that, we’ll need to add a second route called “rentals”:

ember g route rentals 

Now we’ll update our new template at /app/templates/rentals.hbs with some initial content. We’ll come back to this page at a later time to add in the actual movies.

	<div class="jumbo"> 
	<div class="right tomster"></div> 
	<h2>Welcome!</h2> 
	<p>We have videos for every member of your family.</p> 
	<p>Videos will appear here...</p> 
	</div> 
	

Forwarding to the Rentals Page

Although we have generated the Rentals content, we still have not included any code to forward to it. To do that we will add code to our index route handler by implementing a route lifecycle hook, called “beforeModel”.

Each route handler has a set of “lifecycle hooks,” which are functions that are invoked at specific times during the loading of a page. The beforeModel hook gets executed before the data gets fetched from the model hook, and before the page is rendered.

In our index route handler, we’ll call the replaceWith() function replace the current URL in the browser’s history. (A similar function named transitionTo() may be employed to add a URL to the history.) Since we want our rentals route to serve as our home page, we don’t want the index to appear in the history.

Here’s the replaceWith() invocation within the beforeModel lifecycle hook in our index route handler:

 
	import Ember from 'ember'; 
	
	export default Ember.Route.extend({ 
	beforeModel() { 
	this.replaceWith('rentals'); 
	} 
	}); 

The Route Handler File

As mentioned above, each time that you define a new route, it gets added to the route handler file, located at app/router.js, which sets up what should happen when that route is loaded. It now includes both the about and rentals routes:

 
	import EmberRouter from '@ember/routing/router'; 
	import config from './config/environment'; 
	
	const Router = EmberRouter.extend({ 
	location: config.locationType, 
	rootURL: config.rootURL 
	}); 
	
	Router.map(function() { 
	this.route('about'); 
	this.route('rentals'); 
	}); 
	
	export default Router; 

Note that the index route (/) is special in that it does NOT require an entry in the router’s mapping.

Viewing the App

Run ember server (or ember serve, or even ember s for short) on the command line to start the Ember development server and then navigate to https://localhost:4200 to see our new page in action! It should look like this:

Here is a .zip archive containing the relevant directories and files that we created here today. Look them over to gain a better understanding of the three components of Ember routes.

Conclusion

The Sakila Video site is in business! In the next installment, we’ll learn how to set up links between our app pages.