摘要：博文原址從服務(wù)器獲取數(shù)據(jù)，引入組件接著前面四篇環(huán)境搭建以及使用創(chuàng)建第一個靜態(tài)頁面引入計算屬性動態(tài)內(nèi)容模型，保存數(shù)據(jù)到數(shù)據(jù)庫發(fā)布項目，加入功能清理模板，使用組件重構(gòu)版本之后組件會越來越重要。

博文原址：從服務(wù)器獲取數(shù)據(jù)，引入組件

接著前面四篇：

環(huán)境搭建以及使用Ember.js創(chuàng)建第一個靜態(tài)頁面

引入計算屬性、action、動態(tài)內(nèi)容

模型，保存數(shù)據(jù)到數(shù)據(jù)庫

發(fā)布項目，加入CRUD功能

2.0版本之后組件會越來越重要。有關(guān)組件的介紹請看Ember.js 入門指南之二十八組件定義。組件的創(chuàng)建同樣可以使用Ember CLI命令創(chuàng)建。如下命令創(chuàng)建了2個組件，創(chuàng)建的同時會自動創(chuàng)建2個文件；一個是組件類（app/components/xxx.js）。一個是組件對應(yīng)的模板（app/templates/components/xxx.hbs）。

ember g component library-item
ember g component library-item-form

修改模板library-item

下面在組件模板library-item.hbs中增加如下代碼：

    

        
{{item.name}}
    
    

        
Address: {{item.address}}
        
Phone: {{item.phone}}
    
    

      {{yield}}
    

如果注意看可以發(fā)現(xiàn)上述代碼與app/templates/libraries/index.hbs文件的代碼非常相似。這是item替代了model。至于item是怎么來的請看Ember.js 入門指南之二十九屬性傳遞，這篇博文介紹了組件的屬性傳遞，item是從調(diào)用組件的模板傳遞過來的。上述代碼中還有一個重要的東西是{{yield}}，這個表達式與{{outlet}}類似。同樣也是一個占位符。組件渲染之后會被傳進來的html代碼替換。比如下面的調(diào)用代碼：

{{#library-item item=model}}
  Closed
{{/library-item}}

組件渲染之后，上述的Closed會替換到{{yield}}這里，最終得到的html代碼如下：

      Closed

有關(guān)組件渲染的內(nèi)容請看Ember.js 入門指南之三十包裹內(nèi)容。

修改模板library-item-form

    

        Name*
        

          {{input type="text" value=item.name class="form-control" placeholder="The name of the Library"}}
          {{#if item.isValid}}{{/if}}
        
    
    

        Address
        

          {{input type="text" value=item.address class="form-control" placeholder="The address of the Library"}}
        
    
    

        Phone
        

          {{input type="text" value=item.phone class="form-control" placeholder="The phone number of the Library"}}
        
    
    

        

            {{buttonLabel}}
        
    

注意觀察上述代碼與libraries/new.hbs和libraries/edit.hbs幾乎是一樣的。有點不一樣的是把校驗移到model中。比如校驗name屬性不為空。
注意：頂部導(dǎo)入的代碼。

import Model from "ember-data/model";
import attr from "ember-data/attr";
import Ember from "ember";

export default Model.extend({
  name: attr("string"),
  address: attr("string"),
  phone: attr("string"),

  isValid: Ember.computed.notEmpty("name")
});

再修改app/templates/libraries/index.hbs引入組件。

List

  {{#each model as |library|}}
    

      {{#library-item item=library}}
        {{#link-to "libraries.edit" library.id class="btn btn-success btn-xs"}}Edit{{/link-to}}
        Delete
      {{/library-item}}
    
  {{/each}}

在迭代中使用組件，通過屬性名item傳遞迭代出來的對象library到組件中。其中link-to和button這兩句代碼會替換到組件library-item的{{yield}}上。
等待項目重啟完成，可以看到界面與之前的沒有任何變化。頁面是沒有變化，但是后臺的處理還需要完善。

修改app/templates/libraries/new.hbs

Add a new local Library



  

      {{library-item-form item=model buttonLabel="Add to library list" action="saveLibrary"}}
  

  

      {{#library-item item=model}}
          

      {{/library-item}}
  

修改app/templates/libraries/edit.hbs

Edit Library


    

      {{library-item-form item=model buttonLabel="Save changes" action="saveLibrary"}}
    

    

      {{#library-item item=model}}
        

      {{/library-item}}
    

在組件類library-item-form.js增加對action的處理。

import Ember from "ember";

export default Ember.Component.extend({
  buttonLabel: "Save",

  actions: {

    buttonClicked(param) {
      this.sendAction("action", param);
    }

  }
});

原來的文件edit.hbs和new.hbs幾乎是一樣的，可以使用組件重構(gòu)。

{{title}}


    

      {{library-item-form item=model buttonLabel=buttonLabel action="saveLibrary"}}
    

    

      {{#library-item item=model}}
        

      {{/library-item}}
    

為了實現(xiàn)代碼復(fù)用，首先把不同的部分定義成屬性：title、buttonLabel。默認情況下路由會渲染到同名的模板上，如果你想修改這個默認行為可以使用renderTemplate()方法。

API介紹

renderTemplate()

setupController()

默認情況下路由會渲染到同名的模板上，我們使用方法renderTemplate()執(zhí)行渲染的模板。比如下面的代碼使用這個方法執(zhí)行路由new渲染到模板libraries/form.hbs。

// app/routes/libraries/new.js
import Ember from "ember";

export default Ember.Route.extend({

  model: function () {
    return this.store.createRecord("library");
  },

  setupController: function (controller, model) {
    this._super(controller, model);

    controller.set("title", "Create a new library");
    controller.set("buttonLabel", "Create");
  },

  renderTemplate() {
    this.render("libraries/form");
  },

  actions: {

    saveLibrary(newLibrary) {
      newLibrary.save().then(() => this.transitionTo("libraries"));
    },

    willTransition() {
      let model = this.controller.get("model");

      if (model.get("isNew")) {
        model.destroyRecord();
      }
    }
  }
});

注意方法setupController()設(shè)置組件模板中的屬性title和buttonLabel的值。同樣的在修改路由edit.js。

// app/routes/libraries/edit.js
import Ember from "ember";

export default Ember.Route.extend({

  model(params) {
    return this.store.findRecord("library", params.library_id);
  },

  setupController(controller, model) {
    this._super(controller, model);

    controller.set("title", "Edit library");
    controller.set("buttonLabel", "Save changes");
  },

  renderTemplate() {
    this.render("libraries/form");
  },

  actions: {

    saveLibrary(newLibrary) {
      newLibrary.save().then(() => this.transitionTo("libraries"));
    },

    willTransition(transition) {
      let model = this.controller.get("model");

      if (model.get("hasDirtyAttributes")) {
        let confirmation = confirm("Your changes haven"t saved yet. Would you like to leave this form?");

        if (confirmation) {
          model.rollbackAttributes();
        } else {
          transition.abort();
        }
      }
    }
  }
});

使用組件重構(gòu)之后可以刪除app/templates/libraries/new.hbs和app/templates/libraries/edit.hbs，這兩個文件不需要了。效果截圖如下：

知道組件如何使用之后我們繼續(xù)重構(gòu)項目代碼，重構(gòu)導(dǎo)航模板navbar.hbs的鏈接代碼。使用Ember CLI命令創(chuàng)建組件。

ember g component nav-link-to

這次使用擴展的方式擴展一個組件類，擴展Ember內(nèi)置的組件類LinkComponent，使用方法extend()擴展一個類。然后使用屬性tagName指定渲染之后的標(biāo)簽。更多有關(guān)組件屬性的介紹請看Ember.js 入門指南之三十一自定義包裹組件的HTML標(biāo)簽，當(dāng)然你也可以參考網(wǎng)址的教程實現(xiàn)本文的需求。

// app/components/nav-link-to.js
import Ember from "ember";

export default Ember.LinkComponent.extend({
  tagName: "li"
});

注意：記得修改Ember.Component.extend為Ember.LinkComponent.extend。組件模板很簡單。

{{yield}}

最后在修改導(dǎo)航模板navbar.hbs為如下內(nèi)容：

等待項目重啟完成，可以看到界面與之前的沒有任何變化，可以任意點擊導(dǎo)航欄菜單且不會出錯。效果截圖如下：

本篇的家庭作業(yè)就是好好理解組件！參考下面的文章認真學(xué)習(xí)、理解組件。

Ember.js 入門指南之二十八組件定義

Ember.js 入門指南之二十九屬性傳遞

Ember.js 入門指南之三十包裹內(nèi)容

Ember.js 入門指南之三十一自定義包裹組件的HTML標(biāo)簽

Ember.js 入門指南之三十二處理事件

Ember.js 入門指南之三十三action觸發(fā)變化

為了照顧懶人我把完整的代碼放在GitHub上，如有需要請參考參考。博文經(jīng)過多次修改，博文上的代碼與github代碼可能有出入，不過影響不大！如果你覺得博文對你有點用，請在github項目上給我點個star吧。您的肯定對我來說是最大的動力?。?/p>