Ember 表單元素

2018-01-06 17:40 更新

Ember提供的表單元素都是經(jīng)過(guò)封裝的,封裝成了view組件。經(jīng)過(guò)解析渲染之后就會(huì)生成普通的HTML標(biāo)簽。更多詳細(xì)信息你可以查看他們的實(shí)現(xiàn)源碼:Ember.TextFieldEmber.Chechbox、Ember.TextArea。

按照慣例,先創(chuàng)建一個(gè)route
ember generate route form-helper

1,input助手

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

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

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

修改對(duì)應(yīng)的route類,重寫model回調(diào),返回一個(gè)字符串;或者你可以在模板對(duì)應(yīng)的controller類設(shè)置。比如下面的第二段代碼(使用命令ember generate controller form-helper得到模板對(duì)應(yīng)的controller類。 )。

// app/routes/form-helper.js


import Ember from 'ember';


export default Ember.Route.extend({
    model: function() {
        return { helloworld: 'The value from route...' }
    }
});

controller類初始化測(cè)試數(shù)據(jù)。

// app/controllers/form-helper.js


import Ember from 'ember';


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

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

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

運(yùn)行結(jié)果

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

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

按enter鍵觸發(fā)
{{input value=getValueKey enter="getInputValue" name=getByName placeholder="請(qǐng)輸入測(cè)試的內(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);
        }
    }
});

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

run result

最后的輸出結(jié)果有那么一點(diǎn)點(diǎn)意外。v的值是正確的,v2卻是undefined??梢?jiàn)在controller層獲取頁(yè)面的值是通過(guò)value這個(gè)屬性而不是name這個(gè)屬性。跟我們平常HTML的input有點(diǎn)不一樣了?。∵@個(gè)需要注意下。

3,checkbook助手

checkbox這個(gè)表單元素也是經(jīng)過(guò)Ember封裝了,作為一個(gè)組件使用。使用過(guò)程需要注意的問(wèn)題與前面的input是一樣的,屬性是不是使用雙引號(hào)所起的作用是不一樣的。

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

你可以在controller增加一個(gè)屬性isChecked并設(shè)置為true,checkbox將默認(rèn)為選中。

// app/controllers/form-helper.js


import Ember from 'ember';


export default Ember.Controller.extend({
    actions: {
        // ……
    },
    isChecked: true
});

result

4,textarea助手

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

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

本篇簡(jiǎn)單的介紹了常用的表單元素,使用的方式比較簡(jiǎn)單,唯一需要注意的是獲取的輸入框輸入值的方式與平常使用的HTML表單元素有點(diǎn)差別。其他的基本上與普通的HTML表單元素沒(méi)什么差別。
博文完整代碼放在Github(博文經(jīng)過(guò)多次修改,博文上的代碼與github代碼可能又出入,不過(guò)影響不大?。绻阌X(jué)得博文對(duì)你有點(diǎn)用,請(qǐng)?jiān)趃ithub項(xiàng)目上給我點(diǎn)個(gè)star吧。您的肯定對(duì)我來(lái)說(shuō)是最大的動(dòng)力??!

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)