Ember提供的表單元素都是經過封裝的，封裝成了view元件。經過解析渲染之後就會生成普通的HTML標籤。更多詳細資訊你可以檢視他們的實現原始碼：Ember.TextField、Ember.Chechbox、Ember.TextArea。

       按照慣例，先建立一個route：ember generate route form-helper。

1，input助手

{{! //app/templates/form-helper.hbs }}
{{input name="username"   placeholder="your name"}}    

    ​其中可以使用在input助手上的屬性有很多，包括

    ​注意：對於使用在input助手上的屬性是不是使用雙引號括住是有區別的。比如value=”helloworld”和value=helloworld渲染之後的結果是不一樣的，第一種寫法是直接把“helloworld”這個字串賦值設定到value上，第二種寫法是從上下文獲取變數helloworld的值再設定到value上，通常是在controller或者route設定的值。

看下面2行程式碼的演示結果：

{{input name="username"   placeholder="your name" value="model.helloworld"}}
<br><br>
{{input name="username"   placeholder="your name" value=model.helloworld}}    
 

         修改對應的route類，重寫model回撥，返回一個字串；或者你可以在模板對應的controller類設定。比如下面的第二段程式碼（使用命令ember generate controller form-helper得到模板對應的controller類。

）。

// app/routes/form-helper.js
 
import Ember from 'ember';
 
export default Ember.Route.extend({
       model: function() {
              return { helloworld: 'The value from route...' }
       }
});

在controller類設定測試資料。

// app/controllers/form-helper.js
 
import Ember from 'ember';
 
export default Ember.Controller.extend({
       helloworld: 'The value from route...'
});

   對應的，如果你使用的是controller設定測試資料，那麼你的模板獲取資料的方式就要稍微修改下。去掉字首“model.”。controller不需要在回撥中設定測試資料，可用直接定義成controller的屬性。

{{input name="username"   placeholder="your name" value=helloworld}}    

執行結果如下；

2，在input助手上指定觸發事件

       你可以想想下，我們平常寫過的javascript程式碼，不是可用直接在input輸入框上使用javascript的函式，同理的，input助手上可以使用javascript函式，不過使用方式有點差別，請看下面示例。比如按enter鍵觸發指定的事件、失去焦點觸發事件等等。

首先編寫input輸入框，獲取input輸入框的值有點不按常理=^=。在controller類獲取input輸入框的值是通過不用雙引號的value屬性獲取的。

按enter鍵觸發
{{input value=getValueKey enter="getInputValue" name=getByName placeholder="請輸入測試的內容"}}

// app/controllers/form-helper.js
 
import Ember from 'ember';
 
export default Ember.Controller.extend({
       actions: {
              getInputValue: function() {
                     var v = this.get('getValueKey');
                     console.log('v = ' + v);
 
                     var v2 = this.get('getByName');
                     console.log('v2 = ' + v2);
              }
       }
});

輸入測試內容後按enter鍵。

最後的輸出結果有那麼一點點意外。v的值是正確的，v2卻是undefined。可見在controller層獲取頁面的值是通過value這個屬性而不是name這個屬性。跟我們平常HTML的input有點不一樣了！！這個需要注意下。

3，checkbook助手

       checkbox這個表單元素也是經過Ember封裝了，作為一個元件使用。使用過程需要注意的問題與前面的input是一樣的，屬性是不是使用雙引號所起的作用是不一樣的。

checkbox{{input type="checkbox"   checked=isChecked }}    

    ​你可以在controller類增加一個屬性isChecked並設定為true，checkbox將預設為選中。

// app/controllers/form-helper.js
 
import Ember from 'ember';
 
export default Ember.Controller.extend({
       isChecked: true
});

4，textarea助手

{{textarea value=key cols="80"   rows="3" enter="getValueByV"}}    

    ​同樣的也是通過value屬性獲取輸入的值。

    ​本篇簡單的介紹了常用的表單元素，使用的方式比較簡單，唯一需要注意的是獲取的輸入框輸入值的方式與平常使用的HTML表單元素有點差別。其他的屬性設定（比如CSS樣式）基本上與普通的HTML表單元素沒什麼差別。