Ember Data Lab

Objectives

  • Build an Ember model with several attributes.
  • Build routes that render templates. Build nested routes that render nested templates.
  • Build route handlers.
  • Use Handlebars to iterate over and display of list of Ember data objects.
  • Use handlebars to display a single Ember data object.

Overview

In this app, you'll be building a library of educational resources. We'll be dealing with one model, the Resources model. Each resource represents an educational resource (a book, blog post, website, you name it). We'll be using the Active Model Adapter to connect to an external API of educational resources. For the purposes of development and testing, however, we have configured a Javascript library called Mirage to stub external web requests to the API and provide you with some dummy seed data to work with.

This app is simply--users can browse the index of all resources, or view a specific resource. That's it!

Instructions

Part I: Setting up the Adapter and the Model

  • Install Active Model Adapter addon: ember install active-model-adapter in your terminal.
  • Generate an adapter with ember generate adapter application. Your adapter should be defined like this:
import ActiveModelAdapter from 'active-model-adapter';

export default ActiveModelAdapter.extend(){
  // host and namespace defined here
}

Then, code your Active Model Adapter to connect to the following host: https://dry-shore-2260.herokuapp.com, with a namespace of v1.

  • Now that your Ember app knows where to send requests for data (i.e. to the API above), let's set up our Resources model.
  • In app/models/resource.js, define your model to have a title, topic, URL and description. All of these will be of data type 'string'.

IMPORTANT UPDATE:

The manner in which we define Ember models in Ember 2.6.0 has changed slightly. Now, when you generate a model, it should look like this:

import Model from 'ember-data/model';
import attr from 'ember-data/attr';

export default Model.extend({

});

And you should define your attributes like this:

// app/models/user.js
import Model from 'ember-data/model';

export default Model.extend({
  name: attr(),
  email: attr(),
  ...
});

Part II: Building Routes and Route Handlers

  • Define your router in app/router.js such that there is a route for /resources. This route should contain a nested route for an individual resource show page. In other words, a user should be able to visit resources/1 and view that resource.
  • Define a route handler in app/routes/resources.js that will find and return all of the resource records.
  • Define a route handler in app/routes/resources/resource.js that finds and returns the record for a given resource. Use the resource_id from params.
  • Use these resource to help you get this working:

Part III: Templates

  • On the application.hbs page, add a link to the resources page.
  • Let's create the page that the above link will bring the user to. In templates/resources/index.hbs we'll iterate over all of the resources. Iterate over the list of resources using the #each Handlebars helper. The title, topic and URL of each resource should be list items (<li>s), with the title also wrapped in <h5> tags.
  • Build the show page for a given resource, app/templates/resources/resource.hbs.
    • This page should display the title of the resource in an <h4> tag, and the details of the resouce in <p> tags.
Unlock your future in tech
Learn to code.

Learn about Flatiron School's Mission

With a new take on education that falls somewhere between self-taught prodigy and four-year computer science degree, the Flatiron School promises to turn students with little programming experience into developers.

In the six months since the Manhattan coding school was acquired by WeWork, it has spawned locations in Washington, D.C., Brooklyn, and London. Now, WeWork is opening a fourth Flatiron School location, this time in Houston.

Adam Enbar, Flatiron School's cofounder, believes now is the time to grow. "How the world is changing has impacted working and learning in very similar ways. We think education fundamentally is about one thing: enabling people to pursue a better life."

Learn. Love. Code.
Students come to Flatiron School to change their lives. Join our driven community of career-changers and master the skills you need to become a software engineer or a data scientist.
Find Us