Ember 數(shù)據(jù)綁定

2018-01-06 16:48 更新

正如其他的框架一樣,Ember也有它特有的數(shù)據(jù)綁定方式,并且可以在任何一個(gè)對(duì)象上使用綁定。而然,數(shù)據(jù)綁定大多數(shù)情況都是使用在Ember框架本身,對(duì)于開發(fā)者最好還是使用計(jì)算屬性更為簡單方便。

雙向綁定

  1. // 雙向綁定
  2. Wife = Ember.Object.extend({
  3. householdIncome: 800
  4. });
  5. var wife = Wife.create();
  6. Hasband = Ember.Object.extend({
  7. // 使用 alias方法實(shí)現(xiàn)綁定
  8. householdIncome: Ember.computed.alias('wife.householdIncome')
  9. });
  10. hasband = Hasband.create({
  11. wife: wife
  12. });
  13. console.log('householdIncome = ' + hasband.get('householdIncome')); // output > 800
  14. // 可以雙向設(shè)置值
  15. // 在wife方設(shè)置值
  16. wife.set('householdIncome', 1000);
  17. console.log('householdIncome = ' + hasband.get('householdIncome')); // output > 1000
  18. // 在hasband方設(shè)置值
  19. hasband.set('householdIncome', 10);
  20. console.log('wife householdIncome = ' + wife.get('householdIncome'));

run result

需要注意的是綁定并不會(huì)立刻更新對(duì)應(yīng)的值,Ember會(huì)等待直到程序代碼完成運(yùn)行完成并且是在同步改變之前,所以你可以多次改變計(jì)算屬性的值。由于綁定是很短暫的所以也不需要擔(dān)心開銷問題。

單向綁定

單向綁定只會(huì)在一個(gè)方向上傳播變化。相對(duì)雙向綁定來說,單向綁定做了性能優(yōu)化,對(duì)于雙向綁定來說如果你只是在一個(gè)方向上設(shè)置關(guān)聯(lián)其實(shí)就是一個(gè)單向綁定。

  1. var user = Ember.Object.create({
  2. fullName: 'Kara Gates'
  3. });
  4. UserComponent = Ember.Component.extend({
  5. userName: Ember.computed.oneWay('user.fullName')
  6. });
  7. userComponent = UserComponent.create({
  8. user: user
  9. });
  10. console.log('fullName = ' + user.get('fullName'));
  11. // 從user可以設(shè)置
  12. user.set('fullName', "krang Gates");
  13. console.log('component>> ' + userComponent.get('userName'));
  14. // UserComponent 設(shè)置值,user并不能獲取,因?yàn)槭菃蜗虻慕壎?userComponent.set('fullName', "ubuntuvim");
  15. console.log('user >>> ' + user.get('fullName'));

run result

關(guān)于數(shù)據(jù)綁定的知識(shí)點(diǎn)不多,相對(duì)來說不是重點(diǎn),畢竟對(duì)象之間的關(guān)聯(lián)關(guān)系是越少、越簡單越好。關(guān)聯(lián)關(guān)系多了反而難以維護(hù)。
博文完整代碼放在Github(博文經(jīng)過多次修改,博文上的代碼與github代碼可能又出入,不過影響不大?。绻阌X得博文對(duì)你有點(diǎn)用在github項(xiàng)目上給我個(gè)star吧。您的肯定對(duì)我來說是最大的動(dòng)力?。?/p>

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

掃描二維碼

下載編程獅App

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

編程獅公眾號(hào)