Ember.js 入門指南——表單元素
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表單元素沒什麼差別。