我的应用
 
  
  
  
{{outlet}} 
 
 

 
 
 
  
  
  
{{#each post in controller}} 
  
  
  
{{post.title}}
 
  
  
  
{{post.intro}}
 
  
  
  
{{/each}} 
 
 

 
 
 
  
  
  
{{title}}
 
  
  
  
 
  
  
  
  {{body}} 
  
  
  

{{outlet}} 再次指定了路由来决定这个区域放置什么的模板。

因为 {{outlet}} 是所有模板的特性，当你深入路由层级，每个路由会自然地控制页 面上的更小区域。

#p#

它如何工作

现在你理解了基本理论，让我们看看路由是如何控制你的插座的。

模板、控制器以及视图

首先，对于每个高层 Handlebars 模板，你同样也会有一个同名的视图和控制器。例 如：

• application.handlebars: 应用主视图的模板
• App.ApplicationController: 上述模板的控制器。 application.handlebars的初始变量上下文是这个控制器的一个实例
• App.ApplicationView: 上述模板的视图对象

一般地，你会用视图对象来处理事件，并用控制器对象来向模板提供数据。

Ember 提供两种基本类型的控制器， ObjectController 和 ArrayController 。 这些控制器充当模型对象和模型对象列表的代理。

我们以控制器开始，而不是直接向模板暴露模型对象，这样你才有余地使用视图关联的 计算属性，并且最终视图关系不会污染你的模型。

你也可以用模板关联的控制器连接 {{outlet}} 。

路由

应用的路由负责让应用在状态见转移来响应用户的动作。

我们以一个简单的路由开始：

 
 
 
  
  
  
App.Router = Ember.Router.extend({ 
  
  
  
  root: Ember.Route.extend({ 
  
  
  
    index: Ember.Route.extend({ 
  
  
  
      route: '/', 
  
  
  
      redirectsTo: 'posts' 
  
  
  
    }), 
  
  
  
    posts: Ember.Route.extend({ 
  
  
  
      route: '/posts' 
  
  
  
    }), 
  
  
  
    post: Ember.Route.extend({ 
  
  
  
      route: '/posts/:post_id' 
  
  
  
    }) 
  
  
  
  }) 
  
  
  
}); 
 
 

这个路由设置了三个顶层的状态：一个索引页状态。一个显示文章列表的状态和一个 显示单篇文章的状态。

在我们的案例中，我们会简单重定向索引页路由到 posts 状态。在其它应用中，你 也许会需要一个独立的主页。

目前为止，我们已经有了一个状态列表，并且我们的应用也会尽职尽责地进入到 posts 状态，但这不会做任何事。当应用进入到 posts 状态，我们要它连接到应 用模板中的 {{outlet}} 。我们用 connectOutlets 回调来完成这个工作。

 
 
 
  
  
  
App.Router = Ember.Router.extend({ 
  
  
  
  root: Ember.Route.extend({ 
  
  
  
    index: Ember.Route.extend({ 
  
  
  
      route: '/', 
  
  
  
      redirectsTo: 'posts' 
  
  
  
    }), 
  
  
  
    posts: Ember.Route.extend({ 
  
  
  
      route: '/posts', 
  
  
  
      connectOutlets: function(router) { 
  
  
  
        router.get('applicationController').connectOutlet('posts', App.Post.find()); 
  
  
  
      } 
  
  
  
    }), 
  
  
  
    post: Ember.Route.extend({ 
  
  
  
      route: '/posts/:post_id' 
  
  
  
    }) 
  
  
  
  }) 
  
  
  
}); 
 
 

connectOutlet 调用会为我们做这些事：

• 它创建一个 App.PostsView 的新实例，使用 posts.handlebars 模板。
• 它设置 postsController 的 content 属性为一个所有可用文章（App.Post.find() ） 的列表，并让 postsController 作为新的App.PostsView 的控制器。
• 它把新视图连接到 application.handlebars 的插座上。

一般地，你应该值考虑这些对象为串联的操作。当你创建一个视图，你总是会为视图的 控制器提供内容。

过渡和 URL

下一步，我们要为 posts 状态中的应用提供一种迁移到 post 状态的方法。我们 通过指定一个过渡来完成这个工作。

 
 
 
  
  
  
posts: Ember.Route.extend({ 
  
  
  
  route: '/posts', 
  
  
  
  showPost: Ember.Route.transitionTo('post'), 
  
  
  
  connectOutlets: function(router) { 
  
  
  
    router.get('applicationController').connectOutlet('posts', App.Post.find()); 
  
  
  
  } 
  
  
  
}) 
 
 

你用当前模板中的 {{action}} 辅助标记调用这个过渡。

 
 
 
  
  
  
{{#each post in controller}} 
  
  
  
  
{{post.title}}
 
  
  
  
{{/each}} 
 
 

当用户点击一个带有 {{action}} 辅助标记的链接时，Ember 会把一个事件分配到指 定名称的当前状态。在这种情况下，事件是一个过渡。

因为我们使用了一个过渡，Ember 也可以为这个链接生成 URL。Ember 用上下文中的 id 属性来填充 post 状态中的 :post_id 动态段。

下一步，我们会需要在 post 状态上实现 connectOutlets 。这次， connectOutlets 方法会接受 {{action}} 辅助标记上下文指定的文章对象。

 
 
 
  
  
  
post: Ember.Route.extend({ 
  
  
  
  route: '/posts/:post_id', 
  
  
  
  connectOutlets: function(router, post) { 
  
  
  
    router.get('applicationController').connectOutlet('post', post); 
  
  
  
  } 
  
  
  
}) 
 
 

connectOutlet 调用执行的一系列步骤可以概括为如下：

• 它用 post.handlebars 模板创建了一个 App.PostView 的新实例。
• 它设置了用户点击的文章的 postController 的 content 属性。
• 它把新视图连接到 application.handlebars 中的插座。

如果用户把页面存为书签并在之后返回，你不需要任何额外的操作来让链接（ /posts/1 ） 正常工作。

如果用户***次以 posts/1 URL 访问页面，路由会执行这几个步骤：

• 断定 URL 符合的状态（在本例中是 post ）。
• 从 URL 中解压动态段（在本例中是 :post_id ）并调用App.Post.find(post_id) 。这使用一个命名约定来奏效：:post_id 动态段对应 App.Post 。
• 用 App.Post.find 的返回值调用 connectOutlets 。

这意味着不管用户是否从页面中的另一部分或是通过 URL 进入到 post 状态，路由 都会以相同的对象调用 connectOutlets 方法。

#p#

嵌套

***，让我们实现评论和引用通知功能。

因为 post 状态使用和 root 状态相同的模式，它看起来非常类似。

 
 
 
  
  
  
post: Ember.Route.extend({ 
  
  
  
  route: '/posts/:post_id', 
  
  
  
  connectOutlets: function(router, post) { 
  
  
  
    router.get('applicationController').connectOutlet('post', post); 
  
  
  
  }, 
  
  
  
  index: Ember.Route.extend({ 
  
  
  
    route: '/', 
  
  
  
    redirectsTo: 'comments' 
  
  
  
  }), 
  
  
  
  comments: Ember.Route.extend({ 
  
  
  
    route: '/comments', 
  
  
  
    showTrackbacks: Ember.Route.transitionTo('trackbacks'), 
  
  
  
    connectOutlets: function(router) { 
  
  
  
      var postController = router.get('postController'); 
  
  
  
      postController.connectOutlet('comments', postController.get('comments')); 
  
  
  
    } 
  
  
  
  }), 
  
  
  
  trackbacks: Ember.Route.extend({ 
  
  
  
    route: '/trackbacks', 
  
  
  
    showComments: Ember.Route.transitionTo('comments'), 
  
  
  
    connectOutlets: function(router) { 
  
  
  
      var postController = router.get('postController'); 
  
  
  
      postController.connectOutlet('trackbacks', postController.get('trackbacks')); 
  
  
  
    } 
  
  
  
  }) 
  
  
  
}) 
 
 

这里只发生了这些变化：

• 我们只在状态内指定了 showTrackbacks 和 showComments 过渡，而状态里过渡 才有意义。
• 既然我们正在获取给 post.handlebars 使用的视图，我们调用 postController 上的 connectOutlet
• 这种情况下，我们从当前文章中获取 commentsController 和 trackbacksController 的内容。 postController 是一个底层文章模型的代 理，所以我们可以直接用 postController 直接检索关联。

这是单篇文章的模板：

 
 
 
  
  
  
{{title}}
 
  
  
  
 
  
  
  
  {{body}}