2015年7月22日 星期三

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设置的名字来找出对应的路由与控制器。
URLRoute NameControllerRouteTemplate
/indexIndexControllerIndexRouteindex
/aboutaboutAboutControllerAboutRouteabout
/favsfavoritesFavoritesControllerFavoritesRoutefavorites

1 則留言:

  1. After reading this blog i very strong in this topics and this blog really helpful to all.
    AngularJS 5 Online Training

    回覆刪除