Controller

英文原版：https://guides.emberjs.com/v2.14.0/controllers/

Controller与组件类似，它会在进入路由的时候被执行。

controller只接收一个参数 —- 路由中的model( )钩子返回的model。

要定义一个controller，使用命令：

ember generate controller my-controller-name

controller的名称必须与跟它关联的路由的名称一致。所以，如果你有个路由名叫blog-post，那么你创建的controller也必须叫blog-post。

你仅仅需要在自定义一些属性或action函数的时候创建controller。如果你不创建它，那么Ember将会在运行时自动为你生成一个controller的实例。

我们通过一个简单的例子来了解这些概念，现在弄个路由来显示一篇博客。假定现在有一个BlogPost model对象，要把它渲染在blog-post模版中。

BlogPost model有以下属性：

title

intro

body

author

你的模版中将会绑定这些属性：

app/templates/blog-post.hbs

<h1>{{model.title}}</h1>
<h2>by {{model.author}}</h2>

<div class="intro">
{{model.intro}}
</div>
<hr>
<div class="body">
{{model.body}}
</div>

在这个简单的例子中，我们没有使用任何特定的要显示的属性或者action函数。现在，我们的controller的model属性是一个代理的角色，被它代理的就是对应的路由中model( )钩子返回的model对象。

现在我们添加一个功能，它使得用户可以切换文章主题的显示与隐藏。为了实现这个效果，我们首先编辑一下下模版，通过isExpanded属性来决定是否显示文章主题。

app/templates/blog-post.hbs

<h1>{{model.title}}</h1>
<h2>by {{model.author}}</h2>

<div class='intro'>
{{model.intro}}
</div>
<hr>

{{#if isExpanded}}
<button {{action "toggleBody"}}>Hide Body</button>
<div class="body">
{{model.body}}
</div>
{{else}}
<button {{action "toggleBody"}}>Show Body</button>
{{/if}}

接下来，在controller中定义action函数：

app/controllers/blog-post.js

import Ember from 'ember';

export default Ember.Controller.extend({
isExpanded: false,

actions: {
toggleBody() {
this.toggleProperty('isExpanded');
}
}
});

常见问题

在应用中是否应该使用controller呢？我听说它要被淘汰了！

回答是肯定的！Controller仍然是框架所必须的一部分，并且就算你不显式的定义它，它也会被框架自动生成。

本章完