摘要：文章來源引入計算屬性動態內容美化主頁，增加郵件輸入框在主頁中增加一個的，在這個組件中增加一個輸入框和一個按鈕。如果是這種方式，輸入框的值默認一直都是，并且在控制器中不能使用屬性獲取值。

文章來源：引入計算屬性、action、動態內容

在主頁中增加一個Bootstrap的jumbotron，在這個jumbotron組件中增加一個input輸入框和一個button按鈕。

為了界面的美化在HTML代碼中使用了很多Bootstrap的樣式，更多有關Bootstrap的使用請自行學習。

    

        

          
        
        

            Request invitation
        

    

等待項目重啟完成，可以在首頁看到如下效果頁面：

計算屬性簡單講它就是一個特殊點的JS函數。如果你看過Ember.js 入門指南之三計算屬性（compute properties）相信使用起來會比較簡單，再次不過多介紹。

下面幾點需求可以通過計算屬性去實現：

當輸入框的為空時按鈕“Request invitation”不可用

當輸入的郵箱號碼格式不正確時按鈕“Request invitation”不可用

點擊按鈕“Request invitation”之后顯示響應信息

數據保存完成之后情況郵箱輸入框的內容

既然介紹了計算屬性那么應該拿來用了！我們使用屬性isDisabled控制按鈕“Request invitation”是否可用。在button標簽上增加一個HTML屬性disabled，這個HTML屬性決定了按鈕button是否可用。當HTML屬性disabled=true時按鈕不可用，當HTML屬性disabled=false時按鈕可用，那么如何控制這個值是true還是false呢？別忘了在Handlebars模板中可以直接使用{{}}表達式獲取屬性的值，下面修改模板index.hbs，在標簽button中增加屬性disabled的設置：

Request invitation

那要在哪里控制isDisabled的值呢？目前有2種方式，第一是在路由route中控制這個值，另外一種是在控制器controller中控制這個屬性的值。有關路由的信息在前一篇已經簡單介紹過，或者看Ember.js 入門指南之二十路由定義學習。與路由同理，每個模板都對應有一個同名的控制器controller，如果你學習過MVC模式那么你應該很清楚什么是控制器，Ember中的控制器作用于MVC模式中的控制器相似，不過需要注意的是從Ember 3.0之后控制器將不再支持，所以呢！會在后面用組件替代控制器，官方也是這么推薦的！更多有關控制器的介紹請看Controller Introduction。
同樣的我們仍然是使用Ember CLI創建控制器，命令如下：

ember g controller index

創建好控制器之后，在控制器內添加設置屬性isDisabled的代碼：

// app/controller/index.js

import Ember from "ember";

export default Ember.Controller.extend({
    isDisabled: true
});

等待項目重啟完畢，可以看到按鈕是不可用，如果你把屬性isDisabled設置為false那么按鈕是可用的。

計算屬性和觀察者是Ember非常重要的特性。更多有關它們的特性請看下面的文章：

Ember.js 入門指南之三計算屬性

計算屬性官方參考文檔

Ember.js 入門指南之四觀察者

觀察者官方參考文檔

在下面的代碼中有關計算屬性部分使用的2.0之后的語法，在2.0之前計算屬性的語法是不一樣的（舊語法）。

修改模板index.hbs，把郵箱號碼輸入框改為Ember的{{input}}助手。

{{input type="email" value=emailAddress class="form-control" placeholder="Please type your e-mail address." autofocus="autofocus"}}

等待項目重啟之后可以看到界面并沒有變化。{{input}}起到與原來代碼同樣的作用。

值得注意的是value=emailAddress，并不是value="emailAddress"。你可以在控制器中通過名字emailAddress獲取輸入框的值。如果是value="emailAddress"這種方式，輸入框的值默認一直都是"emailAddress"，并且在控制器中不能使用屬性emailAddress獲取值。這一點與平常我們獲取輸入框的值有差別，通常獲取輸入框的值是通過name屬性獲取的。修改控制器代碼，在控制器中增加個計算屬性和一個觀察器，以及一個普通屬性emailAddress。

// app/controller/index.js

import Ember from "ember";

export default Ember.Controller.extend({
    isDisabled: true, //設置默認值為true
    emailAddress: "",  // 設置默認值為空字符串
    // 定義一個計算屬性，當屬性emailAddress發生變化時會被執行不是主動執行的，是要有人調用才執行，
    // 比如執行：this.get("actualEmailAddress")去調用這個屬性才會執行
    actualEmailAddress: Ember.computed("emailAddress", function() {
        console.log("actualEmailAddress function is called: ", this.get("emailAddress"));
    }),
    // 定義一個觀察器，當屬性emailAddress發生變化時會自動執行，也就是說觀察器會檢測屬性emailAddress值的變化
    emailAddressChanged: Ember.observer("emailAddress", function() {
        console.log("observer is called: ", this.get("emailAddress"));
    })
});

下面我們做一個非常有趣的小測試。

等待頁面刷新完畢，打開瀏覽器控制臺，選擇標簽Ember，在選擇左側的/# Route，找到Controller中名為index的，點擊$E（如下圖紅色框出位置），然后再回到Console標簽下。

點擊$E在Console下可以看到類似Ember Inspector ($E): Class {__ember1459491972481: "ember470", __ember_meta__: Meta}的信息。然后在控制臺命令輸入行輸入$E.get("actualEmailAddress")代碼的作用是獲取計算屬性的值。可以看到觸發了計算屬性方法，打印了日志，如下截圖所示：

然后再次執行$E.get("actualEmailAddress")計算屬性方法不會被執行，因為計算屬性檢測的屬性emailAddress值并沒有發生變化，沒有發生變化，計算屬性方法不會被執行，手動修改輸入框的值，結果可以看到計算屬性方法再次執行了，如下圖所示：

然后在控制臺命令行在輸入$E.set("emailAddress", "example@example.com")這句代碼意思是修改輸入框的值。可以看到觀察器方法執行了，因為觀察器檢測到被檢測的屬性emailAddress發生了變化，只要被檢測的屬性發生了變化就會自動執行。可以看到如下截圖的日志信息：

并且可以看到郵箱號碼輸入框的值被置為example@example.com。然后在控制臺命令行再次輸入$E.set("emailAddress", "example@example.com")觀察器方法并不會執行了，即使你輸入多次也不會執行，因為你輸入的值example@example.com始終沒有變化。如果你稍微修改輸入的值那么可以看到觀察器又執行了。比如輸入$E.set("emailAddress", "test")，可以看到控制臺再次打印了日志信息。

測試觀察器還有另外一種簡單的方法，就是直接在郵件輸入框直接輸入某些內容。可以看到控制臺會隨著這輸入的內容變化而變化，感覺就像是在檢測鍵盤事件一樣。下圖是我輸入12@qq.com控制臺打印的日志信息：

到此，我想你對計算屬性和觀察者應該有了一定的認識了！！

明白了計算屬性之后，用計算屬性重寫isDisabled。控制器index.js代碼修改如下：

// app/controller/index.js

import Ember from "ember";

export default Ember.Controller.extend({
    // isDisabled: true, //設置默認值為true

    emailAddress: "",  // 設置默認值為空字符串

    isDisabled: Ember.computed("emailAddress", function() {
        return "" === this.get("emailAddress");  //判斷輸入框內容是否為空
    })

    // 定義一個計算屬性，當屬性emailAddress發生變化時會被執行不是主動執行的，是要有人調用才執行，
    // 比如執行：this.get("actualEmailAddress")去調用這個屬性才會執行
    // actualEmailAddress: Ember.computed("emailAddress", function() {
    //     console.log("actualEmailAddress function is called: ", this.get("emailAddress"));
    // }),
    // 定義一個觀察器，當屬性emailAddress發生變化時會自動執行，也就是說觀察器會檢測屬性emailAddress值的變化
    // emailAddressChanged: Ember.observer("emailAddress", function() {
    //     console.log("observer is called: ", this.get("emailAddress"));
    // })
});

直接把簡單屬性isDisabled定義為計算屬性，并且這個計算屬性檢測emailAddress值的變化，如果emailAddress值為空那么計算屬性isDisabled的值為true否則值為false。從而實現判斷按鈕“Request invitation”是否可用。Ember封裝了很多字符串判斷方法，直接調用Ember封裝好的現成的方法，代碼再修改如下：

// app/controller/index.js

import Ember from "ember";

export default Ember.Controller.extend({
    // isDisabled: true, //設置默認值為true

    emailAddress: "",  // 設置默認值為空字符串

    // isDisabled: Ember.computed("emailAddress", function() {
    //     return "" === this.get("emailAddress");  //判斷輸入框內容是否為空
    // })

    isDisabled: Ember.computed.empty("emailAddress")
});

更多有關計算屬性封裝好的方法請看EMBER.COMPUTED NAMESPACE。

記得前面“計算屬性使用”這個小結提出了使用計算屬性實現多個需求，其中有一個是實現判斷輸入的郵箱號碼是否是正確格式的郵箱。現在再增加一個計算屬性isValid判斷輸入的郵箱號碼的格式是否正確。然后再把這個計算屬性綁定到原來的計算屬性isDisabled上。

// app/controller/index.js

import Ember from "ember";

export default Ember.Controller.extend({

    emailAddress: "",  // 設置默認值為空字符串

    emailAddress: "",  // 設置默認值為空字符串
    //  使用正則表達式判斷郵箱格式，如果正確則返回true反之返回false
    isValid: Ember.computed.match("emailAddress", /^.+@.+..+$/),
    // 把計算屬性isValid綁定到isDisabled上
    isDisabled: Ember.computed.not("isValid")  //當`disabled=false`時按鈕可用，所以正好需要取反
});

到此校驗問題基本實現了，等待項目重啟完成，可以看到默認狀態下按鈕不可用，并且當你輸入的內容不符合郵箱格式時按鈕也是不可用的，如果輸入的內容是一個正確的郵箱那么此時按鈕自動變為可用狀態。不好截圖，就不截圖了！請讀者自己試驗！！

目前為止，輸入檢驗也完成了，但你輸入正確郵箱后添加按鈕并不會發生任何事實，輸入的內容也沒有保存。下面開始介紹如何處理界面輸入的內容。

首先修改模板index.hbs，在模板中增加一個{{action}}標簽，有關Action請看Actions。

Request invitation

僅僅修改了模板中標簽，其他不變，保存等待項目重啟，此時在界面輸入正確的郵箱然后點擊按鈕你在瀏覽器的控制臺看到如下錯誤信息：

能看到錯誤信息說明你的項目是正確的，因為我們并沒有定義saveInvitation，在控制器index中增加這個Action的定義。

// app/controller/index.js

import Ember from "ember";

export default Ember.Controller.extend({
    // isDisabled: true, //設置默認值為true

    emailAddress: "",  // 設置默認值為空字符串

    emailAddress: "",  // 設置默認值為空字符串
    //  使用正則表達式判斷郵箱格式，如果正確則返回true反之返回false
    isValid: Ember.computed.match("emailAddress", /^.+@.+..+$/),
    // 把計算屬性isValid綁定到isDisabled上
    isDisabled: Ember.computed.not("isValid"),  //當`disabled=false`時按鈕可用，所以正好需要取反

    actions: {
        saveInvitation: function() {
            //  注意alert中字符串兩邊使用的是 `  不是單引號或者雙引號
            alert(`Saving of the following email address is in propgress: ${this.get("emailAddress")}`);
            // 模擬保存操作
            this.set("responseMessage", `Thank you! We"ve just saved your email address: ${this.get("emailAddress")}`);
            //  情況輸入框內容
            this.set("emailAddress", "");
        }
    }
});

注意：代碼alert方法中并沒有使用單引號或者是雙引號囊括字符串“Saving of the following email address is in propgress: ${this.get("emailAddress")}”而是使用鍵盤tab鍵頂部的~鍵，這兩者肯定是有區別的，前者直接把${this.get("emailAddress")}當著字符串，后者會把${this.get("emailAddress")}當著表達式，從運行結果就可以看出來了。

輸入正確郵箱后點擊按鈕會得到如下截圖結果：

直接彈出提示信息這種方式太暴力了，改一種提示方式，修改模板index.hbs，然后在注釋掉控制器index.js中的alert語句。

{{! app/templates/index.hbs}}


    

        

          
          {{input type="email" value=emailAddress class="form-control" placeholder="Please type your e-mail address." autofocus="autofocus"}}
        
        

            

Request invitation