4.2 Routing -- Defining Your Routes

一、概述

1. 当应用程序启动时，路由器负责显示模板，加载数据，另外还设置应用程序的状态。这是通过匹配当前URL到你定义的routes来实现的。

2. Ember app router中的Map方法可以被调用来定义URL映射。当调用Map时，你应该传递一个function，它将会被调用，this会被设置为一个对象，你可以用它来创建路由。

app/router.js

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

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

3. 小心！你会得到一些默认的路由：route:application和route:index(对应的路径是"/")。

如果路径名字和路由名字一样你可以省略路径只写路由名字，例子：

app/router.js

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

在你的模板中，你可以使用{{link-to}}在路由之间跳转，使用和提供的路由方法相同的名字（例如/，名字是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类指向当前激活的路由。

4. 你可以通过创建一个Ember.Route子类为一个路由自定义行为。例如，自定义当用户访问"/"时应该发生什么，创建route:index:

app/routes/index.js

export default Ember.Route.extend({
  setupController(controller) {
    // Set the IndexController's `title`
    controller.set('title', 'My App');
  }
});

对于index template来说controller:index是开始的上下文。现在你已经设置了title，你可以使用下面的模板了：

<!-- get the title from the IndexController -->
<h1>{{title}}</h1>

（如果你没有明确定义controller:index，Ember.js会自动为你生成。）

5. Ember.js根据你传递给this.route的name推算出routes和controllers的名字。

URL	Route Name	Controller `app/controllers/`	Route `app/routes/`	Template `app/templates/`
`/`	`index`	↳`index.js`	↳`index.js`	↳`index.hbs`
`/about`	`about`	↳`about.js`	↳`about.js`	↳`about.hbs`
`/favs`	`favorites`	↳`favorites.js`	↳`favorites.js`	↳`favorites.hbs`

二、Nested Routes

你可通过传递给this.route一个回调函数来定义一个嵌套的routes。

app/router.js

Router.map(function() {
  this.route('posts', { path: '/posts' }, function() {
    this.route('new');
  });
});

这个路由器创建这些路由：

URL	Route Name	Controller `app/controllers/`	Route `app/routes/`	Template `app/templates/`
`/`	`index`	↳`index.js`	↳`index.js`	↳`index.js`
N/A	`posts`	↳`posts.js`	↳`posts.js`	↳`posts.hbs`
`/posts`	`posts.index`	↳`posts.js` ↳`posts/index.js`	↳`posts.js` ↳`posts/index.js`	↳`posts.hbs` ↳`posts/index.hbs`
`/posts/new`	`posts.new`	↳`posts.js` ↳`posts/new.js`	↳`posts.js` ↳`posts/new.js`	↳`posts.hbs` ↳`posts/new.hbs`

一个嵌套路由的名字包含它的祖先。如果你想切换到一个路由（通过transitionTo或者{{#link-to}}），确保使用路由的全名（posts.new或者new）。
也就是说，切换到posts或者创建一个链接到posts相当于切换到posts.index或者链接到posts.index。
和你希望的一样，访问/会渲染index模板。
访问/posts会有一点差异。它将会先渲染posts模板。然后，它将在posts模板的outlet中呈现posts/index模板。
最后，访问/posts/new将会先呈现posts模板，然后将会在它的outelet中呈现posts/new模板。

三、Resetting Nested Route Namespace

当你嵌套路由时，子路由不继承祖先的名字可能会是有益的。这允许你参考和重用一个给定的路由，也保持了类名较短。这相当于现在的行为弃用this.resource()函数。

你可以使用resetNamespace: true选项重新设置当前的"namespace"：

app/roputer.js

Router.map(function() {
  this.route('post', { path: '/post/:post_id' }, function() {
    this.route('edit');
    this.route('comments', { resetNamespace: true }, function() {
      this.route('new');
    });
  });
});

这个路由器创建5个路由：

URL	Route Name	Controller	Route	Template
`/`	`index`	`app/controllers/index`	`app/routes/index`	`app/templates/index`
N/A	`post`	`app/controllers/post`	`app/routes/post`	`app/templates/post`
`/post/:post_id²`	`post.index`	`app/controllers/post/index`	`app/routes/post/index`	`app/templates/post/index`
`/post/:post_id/edit`	`post.edit`	`app/controllers/post/edit`	`app/routes/post/edit`	`app/templates/post/edit`
N/A	`comments`	`app/controllers/comments`	`app/routes/comments`	`app/templates/comments`
`/post/:post_id/comments`	`comments.index`	`app/controllers/comments/index`	`app/routes/comments/index`	`app/templates/comments/index`
`/post/:post_id/comments/new`	`comments.new`	`app/controllers/comments/new`	`app/routes/comments/new`	`app/templates/comments/new`

comments模板将会被加载在post的outlet中。所有在comments中的模板将会被加载在comments的outlet中。
对于comments资源来说，route，coutroller和view类名不会有post前缀。

四、Multi-Word Model Names

对于多字的models所有的名字都是驼峰命名除了动态字段。例如，一个model命名为BigMac将会有一个这样的路径/bigMacs/:big_mac_id，路由被命名为bigMac，模板被命名为bigMac。

五、Dynamic Segments

1. 路由处理器的一个职责是把一个URL转换为一个模型。

例如，如果我们的路由是this.route('posts')，我们的路由处理器将会是这样：

app/routes/posts.js

export default Ember.Route.extend({
  model() {
    return $.getJSON("/url/to/some/posts.json");
  }
});

posts模板将会收到所有可用的posts列表作为它的上下文。

因为/posts代表一个复杂的模型，我们不需要任何额外的信息去了解要检索什么。然而，如果你需要一个路由代表一个单一的post，我们不会想要在路由器中硬编码每一个可能的post。

2. 输入动态字段。

一个动态字段是一个URL的一部分，它以：开始，紧随其后的是一个标识符：

app/router.js

Router.map(function() {
  this.route('posts');
  this.route('post', { path: '/post/:post_id' });
});

app/routes/post.js

export default Ember.Route.extend({
  model(params) {
    return $.getJSON("/url/to/some/posts/" + params.post_id + ".json");
  }
});

如果在URL中不使用id属性，你应该在路由中定义一个序列化方法：

app/router.js

Router.map(function() {
  this.route('post', { path: '/posts/:post_slug' });
});

app/routes/post.js

export default Ember.Route.extend({
  model(params) {
    // the server returns `{ slug: 'foo-post' }`
    return Ember.$.getJSON('/posts/' + params.post_slug);
  },

  serialize(model) {
    // this will make the URL `/posts/foo-post`
    return { post_slug: model.get('slug') };
  }
});

这个默认的serialize方法把model的id插入到路由的动态字段中。（例如:post_id）

六、Initial Routes（最初的）

应用程序中的一些路由是立即可用的：

当你的app第一次启动时会进入route:application。它渲染application模板。
route:index是默认路由，当用户访问/时，将会渲染index模板（除非/已经被你自定义的路由重写）。
这些路由是每一个应用程序的一部分，所以你不用在你的app/router.js中指定它们。

七、Wildcard/Globbing Routes(通配符)

你可以定义通配符路由，它可以匹配更多路由。例如，当用户输入不正确的URL与你的app不匹配时，你需要一个catch-all路由。

app/router.js

Router.map(function() {
  this.route('catchall', { path: '/*wildcard' });
});

比如所有的路由都有一个动态字段，当你使用{{link-to}}或者transitionTo编程进入路由时你必须提供一个上下文。

app/routes/application.js

export default Ember.Route.extend({
  actions: {
    error() {
      this.transitionTo('catchall', 'application-error');
    }
  }
});

有了这个代码，如果错误冒泡到应用程序的路由，你的app将进入catchall路由并且在URL中显示/application-error。

posted @ 2016-01-25 12:06 鱼不吐泡泡阅读(358) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

鱼不吐泡泡

4.2 Routing -- Defining Your Routes

公告