Adding the First Route and Template Edit Page

Next, we will create an Ember.js application, a route ('/'), and convert our static mockup into a Handlebars template.

Inside your js directory, add a file for the application at js/application.js and a file for the router at js/router.js. You may place these files anywhere you like (even just putting all code into the same file), but this guide will assume you have separated them into their own files and named them as indicated.

Inside js/application.js add the following code:

1

window.Todos = Ember.Application.create();

This will create a new instance of Ember.Application and make it available as a variable within your browser's JavaScript environment.

Inside js/router.js add the following code:

1
2
3

Todos.Router.map(function () {
  this.resource('todos', { path: '/' });
});

This will tell Ember.js to detect when the application's URL matches '/' and to render the todos template.

Next, update your index.html to wrap the inner contents of <body> in a Handlebars script tag and include js/application.js and js/router.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!-- ... additional lines truncated for brevity ... -->
<body>
  <script type="text/x-handlebars" data-template-name="todos">

    <section id="todoapp">
      ... additional lines truncated for brevity ...
    </section>

    <footer id="info">
      <p>Double-click to edit a todo</p>
    </footer>

  </script>

  <script src="js/libs/jquery.min.js"></script>
  <script src="js/libs/handlebars.js"></script>
  <script src="js/libs/ember.js"></script>
  <script src="js/libs/ember-data.js"></script>

  <script src="js/application.js"></script>
  <script src="js/router.js"></script>
<!-- ... additional lines truncated for brevity ... -->

Reload your web browser to ensure that all files have been referenced correctly and no errors occur.

Live Preview

Ember.js • TodoMVC

Additional Resources