英文原文：http://emberjs.com/guides/getting-started/adding-a-route-and-template

Adding the First Route and Template

添加第一个路由与模板

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

接下来，我们将会创建一个Ember.js应用、一个路由（’/‘），并且将我们的静态页面转换为Handlebars模板。

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.

在 js 目录下，为应用添加一个 js/application.js 文件，为路由添加一个 js/router.js 文件。你可以将这两个文件放在任意你喜欢的地方（甚至把它们所有的代码放在同一个文件内），但是本指南假定你将它们分开了，并且按照前面讲的进行命名。

Inside js/application.js add the following code:

在 js/application.js 文件中添加如下代码：

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

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

这会创建一个 Ember.Application 的实例，并将它作为你本地浏览器JavaScript环境的一个名为 Todos 的变量供使用。

Inside js/router.js add the following code:

在 js/router.js 文件中添加如下代码：

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

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

这会告诉Ember.js，当应用的URL与 '/' 匹配时，渲染（render） todos 模板。

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 after Ember.js and other javascript dependencies:

接着，更新 index.html 里的代码，将 <body> 里的内容包在一个Handlebars的 <script> 标签中，并在 Ember.js 和其他 javascript 依赖后面引用 js/application.js 和 js/router.js：

  1. <!-- ... additional lines truncated for brevity ... -->
  2. <!-- ... 为确保简洁，略去头尾代码 ... -->
  3. <body>
  4.   <script type="text/x-handlebars" data-template-name="todos">
  6.     <section id="todoapp">
  7.       {{! ... additional lines truncated for brevity ... }}
  8.     </section>
  10.     <footer id="info">
  11.       <p>Double-click to edit a todo</p>
  12.     </footer>
  14.   </script>
  16.   <!-- ... Ember.js and other javascript dependencies ... -->
  17.   <!-- ... Ember.js 和其他 javascript 依赖库 ... -->
  18.   <script src="js/application.js"></script>
  19.   <script src="js/router.js"></script>
  20. </body>
  21. <!-- ... additional lines truncated for brevity ... -->
  22. <!-- ... 为确保简洁，略去头尾代码 ... -->

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

重新加载浏览器页面，确保所有的文件被正确引用，且没有错误产生。

Live Preview

在线演示

Ember.js • TodoMVC

Additional Resources

附加资源