This post is part of my series about learning Ember.js with Ruby on Rails.

We have now the basic skeleton to start building an app for my mom, today we are going to talk about 3 important concepts in Ember.js: The Router, Routes and Templates.

Grab the application from where we left last:

  $ git clone [email protected]:abuiles/ember-rails-week-1.git
  $ git reset --hard week-1
  $ bundle install
  $ rails s

Go to http://localhost:3000/ and you should see “Welcome to Ember on Rails!”.

Creating the Application Template.

Ember’s equivalent of Ruby on Rails Application layout is called application too.

Create the file app/templates/application.hbs and put the following content there.

<h1>Hi Ember.js</h1>
{{outlet}}

Refresh your browser and you will see Hi Ember.js.

{{outlet}} is similar to yield on the application template in Ruby on Rails but is not the same, there is also the word yield on Ember.js we’ll cover later

Let’s add something into the outlet, create the file app/templates/index.hbs with the following

<h1>I'm the Index!</h1>

Refresh your browser and you will see “Hi Ember.js” follow by “I’m the Index”.

Under the hood.

To understand why the previous stuff worked without requiring us to add any extra code we’ll have to talk about the concept of Routes.

In Ember.js there is a Router and many Routes.

Router is where we specify the entry points for our application, this is similar to routes.rb.

In Rails router.rb every entry matches to an action in a controller, this is not the case in Ember.js, we mentioned previously that a controller in Ember acts more as decorators for our views.

In Ember every entry in the Router matches to a Route, if we have in the router.es6 an entry like:

this.route("about", { path: "/about" });

Then it will look for app/routes/about.es6 and the template app/templates/about.hbs.

If Ember doesn’t find the route it will create one automatically and if we need to do any kind of processing before showing our template like fetch data from a server or render a different template, then we can do that on the route file.

With this in mind, the reason why putting index.hbs works without doing anything extra is that Ember.js creates by default an IndexRoute, which matches to /.

When we visit /, it tries to find app/routes/index.es6, if it is not there it creates one by default and then renders the template under templates/index.hbs.

A first Route

Let’s create a simple route for index, put the following under /app/routes/index.es6.

export default Ember.Route.extend({
  model: function() {
    return { date: Date() };
  }
});

Replace the index template with

<h1>I'm the Index! {{date}}</h1>

After refreshing you will see I'm the Index follow by a date, we just write our first route, bootstrapped the required stuff for our template and then rendered it into the template!

Task

We want to have an /about page, add the necessary entry to the Router and template.

Resources

I suggest going to the official Ember.js guides and check the section for Routing and Templates.