不得不說，Ember的更新是在是太快了！！本教程還沒寫到一半就又更新到v2.1.0了！！！！不過為了統一還是使用官方v2.0.0的參考文件！！

       從本篇開始進入新的一章——元件。這一章將用6篇文章介紹Ember的元件，從它的定義開始知道它的使用方式，我將為你一一解答！

       準備工作：

       本章程式碼統一訪問專案chapter4_components下，專案程式碼可以在以下網址上找到：

       與之前的文章一樣，專案仍然是使用Ember CLI命令建立專案和各個元件檔案。

       ember new chapter4_components

       cd chapter4_components

       ember server

       如果你能在頁面上看到“Welcome to Ember”說明專案框架搭建成功！那麼你可以繼續往下看了，否則想搭建好專案再往下學習~~~

1，自定義元件及使用

       建立元件方法很簡單：ember generate component my-component-name。一條命令即可，但是需要注意的是元件的名稱必須要包含中劃線“-”，比如blog-post、test-component、audio-player-controls這種格式的命名是合法，但是post、

下面定義一個元件，ember g component blog-post。會自動為你建立元件對應的的模板，執行這條命令之後你可以在app/components和app/templates/components下看到建立的檔案。

<!--  app/templates/components/blog-post.hbs  -->
 
<article>
       <h1>{{title}}</h1>
       <p>{{yield}}</p>
       <p>Edit title: {{input type="text" value=title}}</p>
</article>
 

       為了演示元件的使用需要做些準備工作：

       ember g route index

//  app/routes/index.js
 
import Ember from 'ember';
 
export default Ember.Route.extend({
      
       model: function() {
               return [
                 { id: 1, title: 'Bower: dependencies and resolutions new', body: "In the bower.json file, I see 2 keys dependencies and resolutionsWhy is that so? I understand Bower has a flat dependency structure. So has it got anything to do with that ?", category: 'java' },
                 { id: 2, title: 'Highly Nested JSON Payload - hasMany error', body: "Welcome to the Ember.js discussion forum. We're running on the open source, Ember.js-powered Discourse forum software. They are also providing the hosting for us. Thanks guys! Please use this space for discussion abo… read more", category: 'php' },
                 { id: 3, title: 'Passing a jwt to my REST adapter new ', body: "This sets up a binding between the category query param in the URL, and the category property on controller:articles. In other words, once the articles route has been entered, any changes to the category query param in the URL will update the category property on controller:articles, and vice versa.", category: 'java'}
           ];
         
       }
});

<!-- app/templates/index.hbs  -->
 
{{#each model as |item|}}
       <!-- 使用自定義的元件blog-post -->
       {{#blog-post title=item.title}}
              {{item.body}}
       {{/blog-post}}
{{/each}}

    在這段程式碼中，使用了自定義的元件來顯示資料。最後頁面顯示如下：

看看生成的HTML程式碼：

自定義的元件被渲染到了模板index.hbs使用blog-post的地方。並且自定義元件的HTML標籤沒有變化。

到這裡大概應該知道怎麼去使用元件了，至於它是怎麼就渲染到了使用元件的地方，以及它是怎麼渲染上去的。別急~~後面的文章會為你一一解答。

2，自定義元件類

       使用者自定義的元件類都需要繼承Ember.Component類。

       通常情況下我們會把經常使用的模板片段封裝成元件，只需要定義一次就可以在專案任何一個模板中使用，而且不需要編寫任何的javascript程式碼。比如上述第一點“自定義元件及使用”中描述的一樣。

       但是如果你想你的元件有特殊的行為，並且這些行為是預設元件類無法提供的（比如：改變包裹元件的標籤、響應元件模板初始化某個狀態等），那麼此時你可以自定義元件類，但是要繼承Ember.Component，如果你自定義的元件類沒有繼承這個類，你自定義的元件就很有可能會出現一些不可預知的問題。

       Ember所能識別的自定義元件類的名稱是有規範的。比如，你定義了一個名為blog-post的元件，那麼你的元件類的名稱應該是app/components/blog-post.js。如果元件名為audio-player-controls那麼對應的元件類名為app/components/audio-player-controls.js。即：元件類名與元件同名，這個是v2.0的命名方法，請區別就版本的Ember，舊版本的元件命名規則是駝峰式的命名規則。

舉個簡單的例子，在第一點“自定義元件及使用”中講過，元件預設會被渲染到div標籤內，你可以在元件類中修改這個預設標籤。

//  app/components/blog-post.js
 
import Ember from 'ember';
 
export default Ember.Component.extend({
       tagName: 'nav'
});

這段程式碼修改了包裹元件的標籤名，頁面重新整理後HTML程式碼如下：

可以看到元件的HTML程式碼被包含在nav標籤內。

3，動態渲染元件

       元件的動態渲染與Java的多型有點相似。{{component}}助手會延遲到執行時才決定使用那個元件渲染頁面。當程式需要根據資料不同渲染不同元件的時，這種動態渲染就顯得特別有用。可以使你的邏輯和試圖分離開。

       那麼要怎麼使用呢？非常簡單，只需要把元件名作為引數傳遞過去即可，比如：使用{{component ‘blog-post’}}與{{blog-post}}結果是一致的。我們可以修改第一點“自定義元件及使用”例項中模板index.hbs的程式碼。

<!-- app/templates/index.hbs  -->
 
{{#each model as |item|}}
       <!-- 使用自定義元件的另一種方式（動態渲染元件方式） -->
       {{component 'blog-post' title=item.title}}
       {{item.body}}
{{/each}}

頁面重新整理之後，可以看到結果是一樣的。

       下面為讀者演示如何根據資料不同渲染不同的元件。

       按照慣例，先做好準備工作，使用Ember CLI命令建立2個不同的元件。

       ember g component foo-component

       ember g component bar-component

<!-- app/templates/components/bar-component.hbs -->
 
<h1>Hello from bar</h1>
<p>{{post.body}}</p>

       為何能用post獲取資料，因為在使用元件的地方傳遞了引數。在模板index.hbs中可以看到。

<!-- app/templates/components/foo-component.hbs -->
 
<h1>Hello from foo</h1>
<p>{{post.body}}</p>

       修改顯示的資料，注意資料的最後增加一個屬性pn，pn的值就是元件的名稱。

//  app/routes/index.js
 
import Ember from 'ember';
 
export default Ember.Route.extend({
 
       model: function() {
               return [
                 { id: 1, title: 'Bower: dependencies and resolutions new', body: "In the bower.json file, I see 2 keys dependencies and resolutionsWhy is that so? I understand Bower has a flat dependency structure. So has it got anything to do with that ?", pn: 'bar-component' },
                 { id: 2, title: 'Highly Nested JSON Payload - hasMany error', body: "Welcome to the Ember.js discussion forum. We're running on the open source, Ember.js-powered Discourse forum software. They are also providing the hosting for us. Thanks guys! Please use this space for discussion abo… read more", pn: 'foo-component' },
                 { id: 3, title: 'Passing a jwt to my REST adapter new ', body: "This sets up a binding between the category query param in the URL, and the category property on controller:articles. In other words, once the articles route has been entered, any changes to the category query param in the URL will update the category property on controller:articles, and vice versa.", pn: 'bar-component'}
           ];
         
       }
});

       修改呼叫元件的模板index.hbs。

<!-- app/templates/index.hbs  -->
 
{{#each model as |item|}}
       <!-- 根據元件名渲染不同的元件，第一個引數是元件名，第二個引數為傳遞到元件上顯示的資料 -->
       {{component item.pn post=item}}
{{/each}}

       模板編譯之後會得到形如{{component foo-component post}}的元件呼叫程式碼。

       相信你應該瞭解了動態渲染元件是怎麼回事了！自己動手試試吧~~

到此元件的定義與使用介紹完畢了，不知道你有沒有學會呢？如果你有疑問請給我留言或者直接看官方教程學習。