ember new chapter5_controllers
cd chapter5_controllers
ember server

從本篇開始進入第五章控制器，controller在Ember2.0開始越來越精簡了，職責也更加單一——處理邏輯。

下面是準備工作。

從新建立一個Ember專案，仍舊使用的是Ember CLI命令建立。

在瀏覽器執行專案，看到如下資訊說明專案搭建成功。

Welcome to Ember

1，控制器簡介

       控制器與元件非常相似，由此，在未來的新版本中很有可能元件將會完全取代控制器，很可能隨著Ember版本的更新控制器將退出Ember。目前的版本中元件還不能直接通過路由訪問，需要通過模板呼叫才能使用元件，但是未來的版本會解決這個問題，到時候

       正因如此，模組化的Ember應用很少用到controller。即便是使用了controller也是為了處理下面的兩件事情：

1. controller主要是為了維持當前路由狀態。一般來說，model的屬性會儲存到伺服器，但是controller的屬性卻不會儲存到伺服器。

2. 元件上的動作需要通過controller層轉到route層。

模板上下文的渲染是通過當前controller的路由處理的。Ember所追隨的理念是“約定優於配置”，這也就意味著如果你只需要一個controller 你就建立一個，而不是一切為了“便於工作”。

下面的例子是演示路由顯示

• title 

• intro

• body

• author

model定義如下：

//  app/models/blog-post.js
 
import DS from 'ember-data';
 
export default DS.Model.extend({
  title: DS.attr('string'),  //  屬性預設為string型別，可以不指定
  intro: DS.attr('string'),
  body: DS.attr('string'),
  author: DS.attr('string')
});

在route層增加測試資料，直接返回一個model物件。

//  app/routes/blog-post.js
 
import Ember from 'ember';
 
export default Ember.Route.extend({
       model: function() {
              var blogPost = this.store.createRecord('blog-post', {
                     title: 'DEFINING A COMPONENT',  //  屬性預設為string型別，可以不指定
                     intro: "Components must have at least one dash in their name. ",
                     body: "Components must have at least one dash in their name. So blog-post is an acceptable name, and so is audio-player-controls, but post is not. This prevents clashes with current or future HTML element names, aligns Ember components with the W3C Custom Elements spec, and ensures Ember detects the components automatically.",
                     author: 'ubuntuvim'
              });
              // 直接返回一個model，或者你可以返回promises，
              return blogPost;
       }
});

顯示資訊的模板如下：

<!--  app/templates/blog-post.hbs  -->
 
<h1>{{model.title}}</h1>
<h2>{{model.author}}</h2>
 
<div>
       {{model.intro}}
</div>
 
<hr>
 
<div>
       {{model.body}}
</div>

如果你的程式碼沒有編寫錯誤那麼也會得到如下結果：

“Welcome to Ember”是主模板的資訊，你可以在application.hbs中刪除，但是記得不要刪除{{outlet}}，否則什麼資訊也不顯示。

       這個例子中沒有顯示任何特定的屬性或者指定的動作（action）。此時，控制器的model屬性所扮演的角色僅僅是模型屬性的“pass-through”（或代理）。

注意：控制器獲取的model是從route得到的。

下面為這個例子增加一個功能：使用者可以點選標題觸發顯示或者隱藏post的內容。通過一個屬性isExpanded控制，下面分別修改模板和控制器的程式碼。

//  app/controllers/blog-post.js
 
import Ember from 'ember';
 
export default Ember.Controller.extend({
       isExpanded: false,  //預設不顯示body
       actions: {
              toggleBody: function() {
                     this.toggleProperty('isExpanded');
              }
       }
});

       在controller中增加一個屬性isExpanded，如果你不在controller中定義這個屬性也是可以的。對於這個controller程式碼的解釋請看《Ember.js 入門指南——{{action}} 助手》。

<!--  app/templates/blog-post.hbs  -->
 
<h1>{{model.title}}</h1>
<h2>{{model.author}}</h2>
 
<div>
       {{model.intro}}
</div>
 
<hr>
{{#if isExpanded}}
       <button {{action 'toggleBody'}}>hide body</button>
       <div>
              {{model.body}}
       </div>
{{else}}
       <button {{action 'toggleBody'}}>Show body</button>
{{/if}}

在模板中使用if助手判斷isExpanded的值，如果為true則顯示body，否則不顯示。

頁面載入之後結果如下，首先是不顯示body內容，點選按鈕“Show body”則顯示內容，並且按鈕變為“hide body”。然後在點選這個按鈕則不顯示body內容。

       到此controller的職責你應該大致瞭解了，其主要的作用是邏輯的判斷、處理，比如這裡例子中判斷body內容的顯示與否，其實你也可以把controller類中的處理程式碼放在route類中也可以實現這個效果，但是要作為model的屬性返回（把isExpanded當做model的屬性處理），請讀者自己動手試試，但是把邏輯放到route又會使得route變得“不專一”了，route的主要職責是初始化資料的。我想這也是Ember還留著controller的原因之一吧！！