入门指南 - 添加第一个路由与模板

优质

小牛编辑

196浏览

2023-12-01

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

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

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

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

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

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

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

1
2
3

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

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

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

<!-- ... 为确保简洁，略去头尾代码 ... -->
<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>

<!-- ... Ember.js 和其他 javascript 依赖库 ... -->
  <script src="js/application.js"></script>
  <script src="js/router.js"></script>
</body>
<!-- ... 为确保简洁，略去头尾代码 ... -->

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

在线演示

Ember.js • TodoMVC

入门指南 - 添加第一个路由与模板

在线演示

附加资源