ember.js 學習筆記 4

路由

为了说明它的重要性，设想一下我们在编写一个管理博客的web应用。 在任何时刻，我们都应该能回答类似这样的问题： 当前的访问者已经登陆了吗？他是管理员吗？他在看哪一篇文章？开放了设置页面了吗？他在修改当前文章吗？

在Ember.js内，应用中的每一个可能的状态都会映射到一个URL上。通过将URL封装到路由处理器（route handlers）中, 我们可以简单而清晰地回答上面所问的问题：登陆了吗？在看哪篇文章？

在任何时刻，你的应用中都会有一个或多个活跃的路由处理器。下列两个条件都可以触发它们：

1. 用户与视图发生交互，产生事件导致URL改变。
2. 用户手动改变URL（如: 点击后退按钮），或者是第一次载入页面。

当前的URL发生改变时，活跃的新路由处理器可能会做以下事情：

1. 根据条件选择跳转到新的URL上
2. 更新控制器（controller）以便映射到特定的模型（model）上
3. 更改屏幕（浏览器窗口）上的模板，或者在已存在的出口（outlet）上替换新的模板

当你的应用变得越来越复杂，明白路由究竟发生了什么是很有帮助的。只要简单的修改一下你的Ember.Application，就可以让ember记录路由的事件转换：

App = Ember.Application.create({
  LOG_TRANSITIONS: true
});

指定根URL

如果Ember应用是部署在同一域下的多个Web应用中的一个，这时需要在路由器处指定Ember应用的根URL。在默认情况下，Ember假定部署在域的根路径下。

例如如果需要将博客应用部署在www.emberjs.com/blog下，那么需要指定根URL为/blog/。

这可以通过在路由器中设置rootURL来实现：
App.Router.reopen({
  rootURL: '/blog/'
});

当启动你的应用时，路由器会负责展示模板，载入数据，以及设置应用状态等任务。 这些都是通过将当前的URL与你定义的路由进行匹配来实现的。


App.Router.map(function() {
  this.route("about", { path: "/about" });
  this.route("favorites", { path: "/favs" });
});

现在当用户访问/about时，Ember.js就会渲染about的模板。访问/favs将渲染favorites的模板。


提示：如果路径（path）的名字跟路由（route）的名字是一样的话，你可以不用写上路径。 所以下面的示例跟上面的是相同的。


App.Router.map(function() {
  this.route("about");
  this.route("favorites", { path: "/favs" });
});

在模板里面，你可以用{{link-to}}来导向路由，这需要用到你在route方法中定义的名字 （对于/来说，名字就是index）。


{{#link-to 'index'}}<img class="logo">{{/link-to}}

<nav>
  {{#link-to 'about'}}About{{/link-to}}
  {{#link-to 'favorites'}}Favorites{{/link-to}}
</nav>


{{link-to}}助手会在链接上面加上active的类名（class）来指出当前活跃的路由。


你也可以通过创建一个Ember.Route的子类来对路由的行为进行自定义。例如，创建 App.IndexRoute类来定义当用户访问/时会发生什么。


App.IndexRoute = Ember.Route.extend({
  setupController: function(controller) {
    // Set the IndexController's `title`
    controller.set('title', "My App");
  }
});


Ember.js会自动地根据你在this.route设置的名字来找出对应的路由与控制器。

URL
Route Name
Controller
Route
Template

/
index
IndexController
IndexRoute
index
/about
about
AboutController
AboutRoute
about
/favs
favorites
FavoritesController
FavoritesRoute
favorites