W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗(yàn)值獎勵
正如其他的框架一樣,Ember
也有它特有的數(shù)據(jù)綁定方式,并且可以在任何一個對象上使用綁定。而然,數(shù)據(jù)綁定大多數(shù)情況都是使用在Ember
框架本身,對于開發(fā)者最好還是使用計算屬性更為簡單方便。
// 雙向綁定
Wife = Ember.Object.extend({
householdIncome: 800
});
var wife = Wife.create();
Hasband = Ember.Object.extend({
// 使用 alias方法實(shí)現(xiàn)綁定
householdIncome: Ember.computed.alias('wife.householdIncome')
});
hasband = Hasband.create({
wife: wife
});
console.log('householdIncome = ' + hasband.get('householdIncome')); // output > 800
// 可以雙向設(shè)置值
// 在wife方設(shè)置值
wife.set('householdIncome', 1000);
console.log('householdIncome = ' + hasband.get('householdIncome')); // output > 1000
// 在hasband方設(shè)置值
hasband.set('householdIncome', 10);
console.log('wife householdIncome = ' + wife.get('householdIncome'));
需要注意的是綁定并不會立刻更新對應(yīng)的值,Ember
會等待直到程序代碼完成運(yùn)行完成并且是在同步改變之前,所以你可以多次改變計算屬性的值。由于綁定是很短暫的所以也不需要擔(dān)心開銷問題。
單向綁定只會在一個方向上傳播變化。相對雙向綁定來說,單向綁定做了性能優(yōu)化,對于雙向綁定來說如果你只是在一個方向上設(shè)置關(guān)聯(lián)其實(shí)就是一個單向綁定。
var user = Ember.Object.create({
fullName: 'Kara Gates'
});
UserComponent = Ember.Component.extend({
userName: Ember.computed.oneWay('user.fullName')
});
userComponent = UserComponent.create({
user: user
});
console.log('fullName = ' + user.get('fullName'));
// 從user可以設(shè)置
user.set('fullName', "krang Gates");
console.log('component>> ' + userComponent.get('userName'));
// UserComponent 設(shè)置值,user并不能獲取,因?yàn)槭菃蜗虻慕壎?userComponent.set('fullName', "ubuntuvim");
console.log('user >>> ' + user.get('fullName'));
關(guān)于數(shù)據(jù)綁定的知識點(diǎn)不多,相對來說不是重點(diǎn),畢竟對象之間的關(guān)聯(lián)關(guān)系是越少、越簡單越好。關(guān)聯(lián)關(guān)系多了反而難以維護(hù)。
博文完整代碼放在Github(博文經(jīng)過多次修改,博文上的代碼與github代碼可能又出入,不過影響不大?。?,如果你覺得博文對你有點(diǎn)用在github項(xiàng)目上給我個star
吧。您的肯定對我來說是最大的動力??!
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: