Getting started with Ember.js – Part 2

In Part 1 of this blog, we got started with Ember.js by examining how to set up your development environment from beginning to end with Ember.js using ember-cli – Ember’s build tool. Ember-cli minifies and concatenates your JavaScript, giving you a strong conventional project structure and a powerful add-on system for extensions. In this Part 2 post, I’ll guide you through the setting up of a very basic todo-like Ember.js application to get your feet wet with actual Ember.js development.

Setting up a more detailed overview for the posts

Feel free to change the title of our app header (see Part 1). Go to ‘app/templates/application.hbs’ and change the wording inside the h2 tag to something like ‘Funny posts’ or anything you’d like.

Let’s change our app so when a user clicks on the title of a post, it will take them to a different route based on the id of the post, for example, /posts/1bbe3 . By doing so, we are telling ember to display a different route and template.

Next, let's run the following on the terminal:

ember generate route post

This will modify our app/router.js file by creating a route file for our post and a template. Let’s go ahead and open the app/router.js file to make sure it looks like the following:

import Ember from 'ember';

import config from './config/environment';

var Router = Ember.Router.extend({

location: config.locationType

});

Router.map(function() {

this.resource('posts');

this.route('post', {path: '/posts/:post_id'});

});

export default Router;

In the router file, we make sure the new ‘post’ route has a specific path by passing it a second argument with an object that contains a key called path and a value of ‘/posts/:post_id’. The colon in that path means the second parth of the path after /posts/ is a dynamic URL. In this URL, we will be passing the id of the post so we can determine what specific post to load on our post route. (So far, we have posts and post routes, so don’t get confused).

Now, let's go to app/templates/posts.hbs and make sure we only have the following:

<ul>

{{#each model as |post|}}

   {{#link-to 'post' post tagName='li'}}

     {{post.title}}

   {{/link-to}}

{{/each}}

</ul>

As you can see, we replaced our <li> element with an ember helper called ‘link-to’. What link-to does is that it generates for you the link for our single post route. The first argument is the name of the route, ‘post’, the second argument is the actual post itself and in the last part of the helper, we are telling Handlebars to render the link to as a <li> element by providing the tagName property.

Ember is smart enough to know that if you link to a route and pass it an object, your intent is to set the model on that route to a single post.

Now open ‘app/templates/post.hbs’ and replace the contents with just the following:

{{model.title }}

Now if you refresh the app from ‘/posts’ and click on a post title, you’ll be taken to a different route and you’ll see only the title of the post. What happens if you refresh the page at this URL? You’ll see errors on the console and nothing will be displayed. This is because you arrived at this URL from the previous post's route where you passed a single post as the argument to be the model for the current post route. When you hit refresh you lose this step so no model is set for the current route. You can fix that by adding the following to ‘app/routes/post.js’ :

import Ember from 'ember';

export default Ember.Route.extend({

model(params) {

   return Ember.$.getJSON('https://www.reddit.com/tb/' + params.post_id + '.json?jsonp=?').then(result => {

     return result[0].data.children[0].data;

   });

}

});

Now, whenever you refresh on a single post page, Ember will see that you don’t have a model so the model hook will be triggered on the route. In this case, it will grab the id of the post from the dynamic URL, which is passed as an argument to the query hook and it will make a request to reddit for the relevant post. In this case, notice that we are also returned the request promise and then filtering the results to only return the single post object we need.

Change the app/templates/post.hbs template to the following:

<div class="title">

<h1>{{model.title}}</h1>

</div>

<div class="image">

<img src="{{model.preview.images.firstObject.source.url}}" height="400"/>

</div>

<div class="author">

submitted by: {{model.author}}

</div>

Now, if you look at an individual post, you’ll get the title, image, and author for the post.

Congratulations, you’ve built your first Ember.js application with dynamic data and routes. Hopefully, you now have a better grasp and understanding of some basic concepts for building more ambitious web applications using Ember.

About the Author:

Daniel Ochoa is a senior software engineer at Frog with a passion for crafting beautiful web and mobile experiences. His current interests are Node.js, Ember.js, Ruby on Rails, iOS development with Swift, and the Haskell language. He can be found on Twitter @DanyOchoaOzz.