Ember 表單元素

Ember提供的表單元素都是經(jīng)過封裝的，封裝成了view組件。經(jīng)過解析渲染之后就會生成普通的HTML標簽。更多詳細信息你可以查看他們的實現(xiàn)源碼：Ember.TextField、Ember.Chechbox、Ember.TextArea。

按照慣例，先創(chuàng)建一個route：
ember generate route form-helper。

1，input助手

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

其中可以使用在input助手上的屬性有很多，包括readonly、value、disabled、name等等，更多有關的屬性介紹請移步官網(wǎng)介紹。
注意：對于使用在input助手上的屬性是不是使用雙引號括住是有區(qū)別的。比如value='helloworld'和value=helloworld渲染之后的結(jié)果是不一樣的，第一種寫法是直接把"helloworld"這個字符串賦值設置到value上，第二種寫法是從上下文獲取變量helloworld的值再設置到value上，通常是在controller或者route設置的值。 看下面2行代碼的演示結(jié)果：

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

修改對應的route類，重寫model回調(diào)，返回一個字符串；或者你可以在模板對應的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類初始化測試數(shù)據(jù)。

// app/controllers/form-helper.js


import Ember from 'ember';


export default Ember.Controller.extend({
    helloworld: 'The value from route...'
});

對應的，如果你使用的是controller初始化測試數(shù)據(jù)，那么你的模板獲取數(shù)據(jù)的方式就要稍微修改下。需要去掉前綴model.。controller不需要在回調(diào)中初始化測試數(shù)據(jù)，可用直接定義成controller的屬性。

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

2，在input助手上指定觸發(fā)事件

你可以想想下，我們平常寫過的javascript代碼，不是可用直接在input輸入框上使用javascript的函數(shù)，同理的，input助手上可以使用javascript函數(shù)，不過使用方式有點差別，請看下面示例。比如按enter鍵觸發(fā)指定的事件、失去焦點觸發(fā)事件等等。 首先編寫input輸入框，獲取input輸入框的值有點不按常理=^=。在controller類獲取input輸入框的值是通過不用雙引號的value屬性獲取的。

按enter鍵觸發(fā)
{{input value=getValueKey enter="getInputValue" name=getByName placeholder="請輸入測試的內(nèi)容"}}

// 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);
        }
    }
});

輸入測試內(nèi)容后按enter鍵。

最后的輸出結(jié)果有那么一點點意外。v的值是正確的，v2卻是undefined?？梢娫?code>controller層獲取頁面的值是通過value這個屬性而不是name這個屬性。跟我們平常HTML的input有點不一樣了??！這個需要注意下。

3，checkbook助手

checkbox這個表單元素也是經(jīng)過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({
    actions: {
        // ……
    },
    isChecked: true
});

4，textarea助手

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

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

本篇簡單的介紹了常用的表單元素，使用的方式比較簡單，唯一需要注意的是獲取的輸入框輸入值的方式與平常使用的HTML表單元素有點差別。其他的基本上與普通的HTML表單元素沒什么差別。
博文完整代碼放在Github（博文經(jīng)過多次修改，博文上的代碼與github代碼可能又出入，不過影響不大！），如果你覺得博文對你有點用，請在github項目上給我點個star吧。您的肯定對我來說是最大的動力！！