Ember.Object

Transcript

1. Ember.Object Understanding Ember’s object model
2. @martndemus Marten Schilstra
9. Build full-stack apps
10. Build full-stack apps Feature development (in-house or staff-aug)
11. Build full-stack apps Feature development (in-house or staff-aug) Architecture & Best-Practices consulting
12. Ember.Object Understanding Ember’s object model
16. extend Gives you the ability to do classical inheritance class Person extends Object { say(script) { return `${this.name} says: "${script}"`; } } const Person = Ember.Object.extend({ say(script) { return `${this.name} says: "${script}"`; } });
17. create Instantiates a new instance const Person = Ember.Object.extend({ say(script) { return `${this.name} says: "${script}"`; } }); let tom = Person.create({ name: 'Tom' }); tom.name // -> 'Tom' tom.say('Hello World'); // -> 'Tom says: "Hello World"'
22. class Person { fullName() { return `${this.firstName} ${this.lastName}`; } }); let tom = new Person(); tom.firstName = ‘Tom’; tom.lastName = ‘Dale’;
23. class Person { fullName() { return `${this.firstName} ${this.lastName}`; } }); let tom = new Person(); tom.firstName = ‘Tom’; tom.lastName = ‘Dale’; tom.firstName // -> 'Tom'
24. class Person { fullName() { return `${this.firstName} ${this.lastName}`; } }); let tom = new Person(); tom.firstName = ‘Tom’; tom.lastName = ‘Dale’; tom.firstName // -> 'Tom' tom.lastName // -> 'Dale'
25. class Person { fullName() { return `${this.firstName} ${this.lastName}`; } }); let tom = new Person(); tom.firstName = ‘Tom’; tom.lastName = ‘Dale’; tom.firstName // -> 'Tom' tom.lastName // -> 'Dale' tom.fullName // -> function () { }
26. class Person { get fullName() { return `${this.firstName} ${this.lastName}`; } }); let tom = new Person(); tom.firstName = ‘Tom’; tom.lastName = ‘Dale’;
27. class Person { get fullName() { return `${this.firstName} ${this.lastName}`; } }); let tom = new Person(); tom.firstName = ‘Tom’; tom.lastName = ‘Dale’; tom.firstName // -> 'Tom'
28. class Person { get fullName() { return `${this.firstName} ${this.lastName}`; } }); let tom = new Person(); tom.firstName = ‘Tom’; tom.lastName = ‘Dale’; tom.firstName // -> 'Tom' tom.lastName // -> 'Dale'
29. class Person { get fullName() { return `${this.firstName} ${this.lastName}`; } }); let tom = new Person(); tom.firstName = ‘Tom’; tom.lastName = ‘Dale’; tom.firstName // -> 'Tom' tom.lastName // -> 'Dale' tom.fullName // -> 'Tom Dale'
31. const Person = Ember.Object.extend({ fullName: Ember.computed(‘firstName’, ‘lastName’, function() { return `${this.firstName} ${this.lastName}`; }) }); let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ });
32. const Person = Ember.Object.extend({ fullName: Ember.computed(‘firstName’, ‘lastName’, function() { return `${this.firstName} ${this.lastName}`; }) }); let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ }); tom.firstName // -> 'Tom'
33. const Person = Ember.Object.extend({ fullName: Ember.computed(‘firstName’, ‘lastName’, function() { return `${this.firstName} ${this.lastName}`; }) }); let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ }); tom.firstName // -> 'Tom' tom.lastName // -> 'Dale'
34. const Person = Ember.Object.extend({ fullName: Ember.computed(‘firstName’, ‘lastName’, function() { return `${this.firstName} ${this.lastName}`; }) }); let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ }); tom.firstName // -> 'Tom' tom.lastName // -> 'Dale' tom.fullName // -> ComputedProperty { … }
35. const Person = Ember.Object.extend({ fullName: Ember.computed(‘firstName’, ‘lastName’, function() { return `${this.firstName} ${this.lastName}`; }) }); let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ });
36. const Person = Ember.Object.extend({ fullName: Ember.computed(‘firstName’, ‘lastName’, function() { return `${this.firstName} ${this.lastName}`; }) }); let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ }); tom.get('firstName') // -> 'Tom'
37. const Person = Ember.Object.extend({ fullName: Ember.computed(‘firstName’, ‘lastName’, function() { return `${this.firstName} ${this.lastName}`; }) }); let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ }); tom.get('firstName') // -> 'Tom' tom.get(‘lastName') // -> 'Dale'
38. const Person = Ember.Object.extend({ fullName: Ember.computed(‘firstName’, ‘lastName’, function() { return `${this.firstName} ${this.lastName}`; }) }); let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ }); tom.get('firstName') // -> 'Tom' tom.get(‘lastName') // -> 'Dale' tom.get('fullName') // -> 'Tom Dale'
39. class Person { get fullName() { return `${this.firstName} ${this.lastName}`; } }); let tom = new Person(); tom.firstName = ‘Tom’; tom.lastName = ‘Dale’;
40. class Person { get fullName() { return `${this.firstName} ${this.lastName}`; } }); let tom = new Person(); tom.firstName = ‘Tom’; tom.lastName = ‘Dale’; tom.fullName // -> 'Tom Dale'
41. class Person { get fullName() { return `${this.firstName} ${this.lastName}`; } }); let tom = new Person(); tom.firstName = ‘Tom’; tom.lastName = ‘Dale’; tom.fullName // -> 'Tom Dale' tom.firstName = ‘Tomster’;
42. class Person { get fullName() { return `${this.firstName} ${this.lastName}`; } }); let tom = new Person(); tom.firstName = ‘Tom’; tom.lastName = ‘Dale’; tom.fullName // -> 'Tom Dale' tom.firstName = ‘Tomster’; tom.fullName // -> 'Tomster Dale'
43. const Person = Ember.Object.extend({ fullName: Ember.computed(‘firstName’, ‘lastName’, function() { return `${this.firstName} ${this.lastName}`; }) }); let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ });
44. const Person = Ember.Object.extend({ fullName: Ember.computed(‘firstName’, ‘lastName’, function() { return `${this.firstName} ${this.lastName}`; }) }); let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ }); tom.get('fullName') // -> 'Tom Dale'
45. const Person = Ember.Object.extend({ fullName: Ember.computed(‘firstName’, ‘lastName’, function() { return `${this.firstName} ${this.lastName}`; }) }); let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ }); tom.get('fullName') // -> 'Tom Dale' tom.firstName = ‘Tomster’
46. const Person = Ember.Object.extend({ fullName: Ember.computed(‘firstName’, ‘lastName’, function() { return `${this.firstName} ${this.lastName}`; }) }); let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ }); tom.get('fullName') // -> 'Tom Dale' tom.firstName = ‘Tomster’ tom.get('fullName') // -> 'Tom Dale'
47. const Person = Ember.Object.extend({ fullName: Ember.computed(‘firstName’, ‘lastName’, function() { return `${this.firstName} ${this.lastName}`; }) }); let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ });
48. const Person = Ember.Object.extend({ fullName: Ember.computed(‘firstName’, ‘lastName’, function() { return `${this.firstName} ${this.lastName}`; }) }); let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ }); tom.get('fullName') // -> 'Tom Dale'
49. const Person = Ember.Object.extend({ fullName: Ember.computed(‘firstName’, ‘lastName’, function() { return `${this.firstName} ${this.lastName}`; }) }); let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ }); tom.get('fullName') // -> 'Tom Dale' tom.set(‘firstName’, ‘Tomster’)
50. const Person = Ember.Object.extend({ fullName: Ember.computed(‘firstName’, ‘lastName’, function() { return `${this.firstName} ${this.lastName}`; }) }); let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ }); tom.get('fullName') // -> 'Tom Dale' tom.set(‘firstName’, ‘Tomster’) tom.get('fullName') // -> 'Tomster Dale'
51. class Person { get fullName() { return `${this.firstName} ${this.lastName}`; } }); let tom = new Person(); tom.firstName = ‘Tom’; tom.lastName = ‘Dale’;
52. tom.get('fullName') // -> TypeError: tom.get is not a function class Person { get fullName() { return `${this.firstName} ${this.lastName}`; } }); let tom = new Person(); tom.firstName = ‘Tom’; tom.lastName = ‘Dale’;
53. Ember.Observable import Ember from 'ember'; export default Mixin.create({ get(keyName) { return Ember.get(this, keyName); }, set(keyName, value) { return Ember.set(this, keyName, value); } });
54. class Person { get fullName() { return `${this.firstName} ${this.lastName}`; } }); let tom = new Person(); tom.firstName = ‘Tom’; tom.lastName = ‘Dale’;
55. class Person { get fullName() { return `${this.firstName} ${this.lastName}`; } }); let tom = new Person(); tom.firstName = ‘Tom’; tom.lastName = ‘Dale’; Ember.get(tom, ’firstName') // -> 'Tom'
56. class Person { get fullName() { return `${this.firstName} ${this.lastName}`; } }); let tom = new Person(); tom.firstName = ‘Tom’; tom.lastName = ‘Dale’; Ember.get(tom, ’firstName') // -> 'Tom' Ember.get(tom, ’lastName’) // -> 'Dale'
57. class Person { get fullName() { return `${this.firstName} ${this.lastName}`; } }); let tom = new Person(); tom.firstName = ‘Tom’; tom.lastName = ‘Dale’; Ember.get(tom, ’firstName') // -> 'Tom' Ember.get(tom, ’lastName’) // -> 'Dale' Ember.get(tom, ’fullName’) // -> 'Tom Dale'
58. class Person { get fullName() { return `${this.firstName} ${this.lastName}`; } }); let tom = new Person(); tom.firstName = ‘Tom’; tom.lastName = ‘Dale’;
59. class Person { get fullName() { return `${this.firstName} ${this.lastName}`; } }); let tom = new Person(); tom.firstName = ‘Tom’; tom.lastName = ‘Dale’; Ember.get(tom, ’fullName') // -> 'Tom Dale'
60. class Person { get fullName() { return `${this.firstName} ${this.lastName}`; } }); let tom = new Person(); tom.firstName = ‘Tom’; tom.lastName = ‘Dale’; Ember.get(tom, ’fullName') // -> 'Tom Dale' Ember.set(tom, ’firstName’, ‘Tomster’)
61. class Person { get fullName() { return `${this.firstName} ${this.lastName}`; } }); let tom = new Person(); tom.firstName = ‘Tom’; tom.lastName = ‘Dale’; Ember.get(tom, ’fullName') // -> 'Tom Dale' Ember.set(tom, ’firstName’, ‘Tomster’) Ember.get(tom, ’fullName') // -> 'Tomster Dale'
63. let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ }); const Person = Ember.Object.extend({ fullName: Ember.computed(‘firstName’, ‘lastName’, function() { return `${this.firstName} ${this.lastName}`; }) });
64. let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ }); tom.set(‘fullName’, ‘Yehuda Katz’) const Person = Ember.Object.extend({ fullName: Ember.computed(‘firstName’, ‘lastName’, function() { return `${this.firstName} ${this.lastName}`; }) });
65. let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ }); tom.set(‘fullName’, ‘Yehuda Katz’) const Person = Ember.Object.extend({ fullName: Ember.computed(‘firstName’, ‘lastName’, function() { return `${this.firstName} ${this.lastName}`; }) }); Ember.get(tom, ’fullName') // -> ‘Yehuda Katz'
66. let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ }); tom.set(‘fullName’, ‘Yehuda Katz’) const Person = Ember.Object.extend({ fullName: Ember.computed(‘firstName’, ‘lastName’, function() { return `${this.firstName} ${this.lastName}`; }) }); Ember.get(tom, ’fullName') // -> ‘Yehuda Katz' tom.fullName // -> ‘Yehuda Katz'
67. let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ }); const Person = Ember.Object.extend({ fullName: Ember.computed(‘firstName’, ‘lastName’, function() { return `${this.firstName} ${this.lastName}`; }).readOnly() });
68. let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ }); tom.set(‘fullName’, ‘Yehuda Katz’) // -> Cannot set read-only property "fullName" const Person = Ember.Object.extend({ fullName: Ember.computed(‘firstName’, ‘lastName’, function() { return `${this.firstName} ${this.lastName}`; }).readOnly() });
69. let tom = Person.create({ fullName: ‘Tom Dale’ }); const Person = Ember.Object.extend({ fullName: Ember.computed(‘firstName’, ‘lastName’, { get() { return `${this.firstName} ${this.lastName}`; }, set(key, value) { let [firstName, lastName] = value.split(/ /); this.firstName = firstName; this.lastName = lastName; return value; } }) });
70. let tom = Person.create({ fullName: ‘Tom Dale’ }); const Person = Ember.Object.extend({ fullName: Ember.computed(‘firstName’, ‘lastName’, { get() { return `${this.firstName} ${this.lastName}`; }, set(key, value) { let [firstName, lastName] = value.split(/ /); this.firstName = firstName; this.lastName = lastName; return value; } }) }); Ember.get(tom, ’firstName') // -> 'Tom'
71. let tom = Person.create({ fullName: ‘Tom Dale’ }); const Person = Ember.Object.extend({ fullName: Ember.computed(‘firstName’, ‘lastName’, { get() { return `${this.firstName} ${this.lastName}`; }, set(key, value) { let [firstName, lastName] = value.split(/ /); this.firstName = firstName; this.lastName = lastName; return value; } }) }); Ember.get(tom, ’firstName') // -> 'Tom' Ember.get(tom, ’lastName’) // -> 'Dale'
72. const Keyword = Ember.Object.extend({ value: Ember.computed(‘locale’, function() { let local = Ember.get(this, ‘locale’); return Ember.get(this, locale); }) }); let keyword = Keyword.create({ en: ‘A small horse’, fr: ‘Un petit cheval’, locale: ‘fr’ });
73. const Keyword = Ember.Object.extend({ value: Ember.computed(‘locale’, function() { let local = Ember.get(this, ‘locale’); return Ember.get(this, locale); }) }); Ember.get(keyword, ’value') // -> ‘Un petit cheval' let keyword = Keyword.create({ en: ‘A small horse’, fr: ‘Un petit cheval’, locale: ‘fr’ });
74. const Keyword = Ember.Object.extend({ value: Ember.computed(‘locale’, function() { let local = Ember.get(this, ‘locale’); return Ember.get(this, locale); }) }); Ember.get(keyword, ’value') // -> ‘Un petit cheval' let keyword = Keyword.create({ en: ‘A small horse’, fr: ‘Un petit cheval’, locale: ‘fr’ }); Ember.set(keyword, ’locale’, ‘en’)
75. const Keyword = Ember.Object.extend({ value: Ember.computed(‘locale’, function() { let local = Ember.get(this, ‘locale’); return Ember.get(this, locale); }) }); Ember.get(keyword, ’value') // -> ‘Un petit cheval' let keyword = Keyword.create({ en: ‘A small horse’, fr: ‘Un petit cheval’, locale: ‘fr’ }); Ember.set(keyword, ’locale’, ‘en’) Ember.get(keyword, ’value') // -> ‘A small horse'
76. const Keyword = Ember.Object.extend({ value: Ember.computed(‘locale’, function() { let local = Ember.get(this, ‘locale’); return Ember.get(this, locale); }) }); let keyword = Keyword.create({ en: ‘A small horse’, fr: ‘Un petit cheval’, locale: ‘fr’ });
77. const Keyword = Ember.Object.extend({ value: Ember.computed(‘locale’, function() { let local = Ember.get(this, ‘locale’); return Ember.get(this, locale); }) }); let keyword = Keyword.create({ en: ‘A small horse’, fr: ‘Un petit cheval’, locale: ‘fr’ }); Ember.set(keyword, ’locale’, ‘en’)
78. const Keyword = Ember.Object.extend({ value: Ember.computed(‘locale’, function() { let local = Ember.get(this, ‘locale’); return Ember.get(this, locale); }) }); let keyword = Keyword.create({ en: ‘A small horse’, fr: ‘Un petit cheval’, locale: ‘fr’ }); Ember.set(keyword, ’locale’, ‘en’) Ember.get(keyword, ’value') // -> ‘A small horse'
79. const Keyword = Ember.Object.extend({ value: Ember.computed(‘locale’, function() { let local = Ember.get(this, ‘locale’); return Ember.get(this, locale); }) }); let keyword = Keyword.create({ en: ‘A small horse’, fr: ‘Un petit cheval’, locale: ‘fr’ }); Ember.set(keyword, ’locale’, ‘en’) Ember.get(keyword, ’value') // -> ‘A small horse' Ember.set(keyword, ’en’, ‘A medium horse’)
80. const Keyword = Ember.Object.extend({ value: Ember.computed(‘locale’, function() { let local = Ember.get(this, ‘locale’); return Ember.get(this, locale); }) }); let keyword = Keyword.create({ en: ‘A small horse’, fr: ‘Un petit cheval’, locale: ‘fr’ }); Ember.set(keyword, ’locale’, ‘en’) Ember.get(keyword, ’value') // -> ‘A small horse' Ember.set(keyword, ’en’, ‘A medium horse’) Ember.get(keyword, ’value') // -> ‘A small horse'
81. const Keyword = Ember.Object.extend({ value: Ember.computed(‘locale’, ‘en’, ‘fr’, function() { let local = Ember.get(this, ‘locale’); return Ember.get(this, locale); }) }); let keyword = Keyword.create({ en: ‘A small horse’, fr: ‘Un petit cheval’, locale: ‘fr’ });
82. const Keyword = Ember.Object.extend({ value: Ember.computed(‘locale’, ‘en’, ‘fr’, function() { let local = Ember.get(this, ‘locale’); return Ember.get(this, locale); }) }); let keyword = Keyword.create({ en: ‘A small horse’, fr: ‘Un petit cheval’, locale: ‘fr’ }); Ember.set(keyword, ’locale’, ‘en’)
83. const Keyword = Ember.Object.extend({ value: Ember.computed(‘locale’, ‘en’, ‘fr’, function() { let local = Ember.get(this, ‘locale’); return Ember.get(this, locale); }) }); let keyword = Keyword.create({ en: ‘A small horse’, fr: ‘Un petit cheval’, locale: ‘fr’ }); Ember.set(keyword, ’locale’, ‘en’) Ember.get(keyword, ’value') // -> ‘A small horse'
84. const Keyword = Ember.Object.extend({ value: Ember.computed(‘locale’, ‘en’, ‘fr’, function() { let local = Ember.get(this, ‘locale’); return Ember.get(this, locale); }) }); let keyword = Keyword.create({ en: ‘A small horse’, fr: ‘Un petit cheval’, locale: ‘fr’ }); Ember.set(keyword, ’locale’, ‘en’) Ember.get(keyword, ’value') // -> ‘A small horse' Ember.set(keyword, ’en’, ‘A medium horse’)
85. const Keyword = Ember.Object.extend({ value: Ember.computed(‘locale’, ‘en’, ‘fr’, function() { let local = Ember.get(this, ‘locale’); return Ember.get(this, locale); }) }); let keyword = Keyword.create({ en: ‘A small horse’, fr: ‘Un petit cheval’, locale: ‘fr’ }); Ember.set(keyword, ’locale’, ‘en’) Ember.get(keyword, ’value') // -> ‘A small horse' Ember.set(keyword, ’en’, ‘A medium horse’) Ember.get(keyword, ’value') // -> ‘A medium horse'
86. const Keyword = Ember.Object.extend({ value: Ember.computed(‘locale’, ‘????????’, function() { let local = Ember.get(this, ‘locale’); return Ember.get(this, locale); }) }); let keyword = Keyword.create({ en: ‘A small horse’, fr: ‘Un petit cheval’, locale: ‘fr’ });
87. const Keyword = Ember.Object.extend({ localeChanged: Ember.observer(‘locale’, function() { let currentLocale = Ember.get(this, ‘locale’); let cp = Ember.computed(currentLocale, function() { return Ember.get(this, currentLocale); }); Ember.defineProperty(this, ’value’, cp); }) }); let keyword = Keyword.create({ en: ‘A small horse’, fr: ‘Un petit cheval’, locale: ‘fr’ });
88. const Keyword = Ember.Object.extend({ localeChanged: Ember.observer(‘locale’, function() { let currentLocale = Ember.get(this, ‘locale’); let cp = Ember.computed(currentLocale, function() { return Ember.get(this, currentLocale); }); Ember.defineProperty(this, ’value’, cp); }) }); let keyword = Keyword.create({ en: ‘A small horse’, fr: ‘Un petit cheval’, locale: ‘fr’ }); Ember.set(keyword, ’locale’, ‘en’)
89. const Keyword = Ember.Object.extend({ localeChanged: Ember.observer(‘locale’, function() { let currentLocale = Ember.get(this, ‘locale’); let cp = Ember.computed(currentLocale, function() { return Ember.get(this, currentLocale); }); Ember.defineProperty(this, ’value’, cp); }) }); let keyword = Keyword.create({ en: ‘A small horse’, fr: ‘Un petit cheval’, locale: ‘fr’ }); Ember.get(keyword, ’value') // -> ‘A small horse' Ember.set(keyword, ’locale’, ‘en’)
90. const Keyword = Ember.Object.extend({ localeChanged: Ember.observer(‘locale’, function() { let currentLocale = Ember.get(this, ‘locale’); let cp = Ember.computed(currentLocale, function() { return Ember.get(this, currentLocale); }); Ember.defineProperty(this, ’value’, cp); }) }); let keyword = Keyword.create({ en: ‘A small horse’, fr: ‘Un petit cheval’, locale: ‘fr’ }); Ember.get(keyword, ’value') // -> ‘A small horse' Ember.set(keyword, ’en’, ‘A medium horse’) Ember.set(keyword, ’locale’, ‘en’)
91. const Keyword = Ember.Object.extend({ localeChanged: Ember.observer(‘locale’, function() { let currentLocale = Ember.get(this, ‘locale’); let cp = Ember.computed(currentLocale, function() { return Ember.get(this, currentLocale); }); Ember.defineProperty(this, ’value’, cp); }) }); let keyword = Keyword.create({ en: ‘A small horse’, fr: ‘Un petit cheval’, locale: ‘fr’ }); Ember.get(keyword, ’value') // -> ‘A small horse' Ember.set(keyword, ’en’, ‘A medium horse’) Ember.get(keyword, ’value') // -> ‘A medium horse' Ember.set(keyword, ’locale’, ‘en’)
92. const Keyword = Ember.Object.extend({ localeChanged: Ember.observer(‘locale’, function() { let currentLocale = Ember.get(this, ‘locale’); let cp = Ember.computed(currentLocale, function() { return Ember.get(this, currentLocale); }); Ember.defineProperty(this, ’value’, cp); }) }); let keyword = Keyword.create({ en: ‘A small horse’, fr: ‘Un petit cheval’, locale: ‘fr’ });
93. const Keyword = Ember.Object.extend({ localeChanged: Ember.observer(‘locale’, function() { let currentLocale = Ember.get(this, ‘locale’); let cp = Ember.computed(currentLocale, function() { return Ember.get(this, currentLocale); }); Ember.defineProperty(this, ’value’, cp); }) }); let keyword = Keyword.create({ en: ‘A small horse’, fr: ‘Un petit cheval’, locale: ‘fr’ }); Ember.get(keyword, ’value') // -> undefined
94. const Keyword = Ember.Object.extend({ init() { this.localeChanged(); }, localeChanged: Ember.observer(‘locale’, function() { let currentLocale = Ember.get(this, ‘locale’); let cp = Ember.computed(currentLocale, function() { return Ember.get(this, currentLocale); }); Ember.defineProperty(this, ’value’, cp); }) }); let keyword = Keyword.create({ en: ‘A small horse’, fr: ‘Un petit cheval’, locale: ‘fr’ });
95. const Keyword = Ember.Object.extend({ init() { this.localeChanged(); }, localeChanged: Ember.observer(‘locale’, function() { let currentLocale = Ember.get(this, ‘locale’); let cp = Ember.computed(currentLocale, function() { return Ember.get(this, currentLocale); }); Ember.defineProperty(this, ’value’, cp); }) }); let keyword = Keyword.create({ en: ‘A small horse’, fr: ‘Un petit cheval’, locale: ‘fr’ }); Ember.get(keyword, ’value') // -> ‘Un petit cheval'
96. const Person = Ember.Object.extend({ init() { this.friends = Ember.A(); } }); let goku = SuperPerson.create(); const SuperPerson = Ember.Object.extend({ init() { this.powerLevel = 90001; } });
97. const Person = Ember.Object.extend({ init() { this.friends = Ember.A(); } }); let goku = SuperPerson.create(); Ember.get(goku, ’friends') // -> undefined const SuperPerson = Ember.Object.extend({ init() { this.powerLevel = 90001; } });
98. const Person = Ember.Object.extend({ init() { this.friends = Ember.A(); } }); let goku = SuperPerson.create(); Ember.get(goku, ’friends') // -> undefined const SuperPerson = Ember.Object.extend({ init() { this.powerLevel = 90001; } }); Ember.get(goku, ’powerLevel') // -> 9001
99. const Person = Ember.Object.extend({ init() { this.friends = Ember.A(); } }); let goku = SuperPerson.create(); const SuperPerson = Ember.Object.extend({ init() { this._super(…arguments); this.powerLevel = 90001; } });
100. const Person = Ember.Object.extend({ init() { this.friends = Ember.A(); } }); let goku = SuperPerson.create(); Ember.get(goku, ’friends') // -> [] const SuperPerson = Ember.Object.extend({ init() { this._super(…arguments); this.powerLevel = 90001; } });
101. const Person = Ember.Object.extend({ init() { this.friends = Ember.A(); } }); let goku = SuperPerson.create(); Ember.get(goku, ’friends') // -> [] const SuperPerson = Ember.Object.extend({ init() { this._super(…arguments); this.powerLevel = 90001; } }); Ember.get(goku, ’powerLevel') // -> 9001
102. const Person = Ember.Object.extend({ init() { this.friends = Ember.A(); } }); const Person = Ember.Object.extend({ friends: Ember.A(); }); vs
103. const Person = Ember.Object.extend({ friends: Ember.A(); }); let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ }); let yehuda = Person.create({ firstName: ‘Yehuda’, lastName: ‘Katz’ });
104. const Person = Ember.Object.extend({ friends: Ember.A(); }); let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ }); let yehuda = Person.create({ firstName: ‘Yehuda’, lastName: ‘Katz’ }); Ember.get(tom, ’friends') // -> []
105. const Person = Ember.Object.extend({ friends: Ember.A(); }); let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ }); let yehuda = Person.create({ firstName: ‘Yehuda’, lastName: ‘Katz’ }); Ember.get(tom, ’friends') // -> [] Ember.get(yehuda, ’friends') // -> []
106. const Person = Ember.Object.extend({ friends: Ember.A(); }); let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ }); let yehuda = Person.create({ firstName: ‘Yehuda’, lastName: ‘Katz’ }); Ember.get(tom, ’friends') // -> [] Ember.get(yehuda, ’friends') // -> [] Ember.get(yehuda, ’friends’).push(tom)
107. const Person = Ember.Object.extend({ friends: Ember.A(); }); let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ }); let yehuda = Person.create({ firstName: ‘Yehuda’, lastName: ‘Katz’ }); Ember.get(tom, ’friends') // -> [] Ember.get(yehuda, ’friends') // -> [] Ember.get(yehuda, ’friends’).push(tom) Ember.get(yehuda, ’friends') // -> [tom]
108. const Person = Ember.Object.extend({ friends: Ember.A(); }); let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ }); let yehuda = Person.create({ firstName: ‘Yehuda’, lastName: ‘Katz’ }); Ember.get(tom, ’friends') // -> [] Ember.get(yehuda, ’friends') // -> [] Ember.get(yehuda, ’friends’).push(tom) Ember.get(tom, ’friends') // -> [tom] Ember.get(yehuda, ’friends') // -> [tom]
109. let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ }); let yehuda = Person.create({ firstName: ‘Yehuda’, lastName: ‘Katz’ }); const Person = Ember.Object.extend({ init() { this.friends = Ember.A(); } });
110. let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ }); let yehuda = Person.create({ firstName: ‘Yehuda’, lastName: ‘Katz’ }); Ember.get(tom, ’friends') // -> [] const Person = Ember.Object.extend({ init() { this.friends = Ember.A(); } });
111. let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ }); let yehuda = Person.create({ firstName: ‘Yehuda’, lastName: ‘Katz’ }); Ember.get(tom, ’friends') // -> [] Ember.get(yehuda, ’friends') // -> [] const Person = Ember.Object.extend({ init() { this.friends = Ember.A(); } });
112. let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ }); let yehuda = Person.create({ firstName: ‘Yehuda’, lastName: ‘Katz’ }); Ember.get(tom, ’friends') // -> [] Ember.get(yehuda, ’friends') // -> [] Ember.get(yehuda, ’friends’).push(tom) const Person = Ember.Object.extend({ init() { this.friends = Ember.A(); } });
113. let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ }); let yehuda = Person.create({ firstName: ‘Yehuda’, lastName: ‘Katz’ }); Ember.get(tom, ’friends') // -> [] Ember.get(yehuda, ’friends') // -> [] Ember.get(yehuda, ’friends’).push(tom) Ember.get(yehuda, ’friends') // -> [tom] const Person = Ember.Object.extend({ init() { this.friends = Ember.A(); } });
114. let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ }); let yehuda = Person.create({ firstName: ‘Yehuda’, lastName: ‘Katz’ }); Ember.get(tom, ’friends') // -> [] Ember.get(yehuda, ’friends') // -> [] Ember.get(yehuda, ’friends’).push(tom) Ember.get(tom, ’friends') // -> [] Ember.get(yehuda, ’friends') // -> [tom] const Person = Ember.Object.extend({ init() { this.friends = Ember.A(); } });
115. let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ }); let yehuda = Person.create({ firstName: ‘Yehuda’, lastName: ‘Katz’ }); const Person = Ember.Object.extend({ init() { this.friends = Ember.A(); } });
116. let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ }); let yehuda = Person.create({ firstName: ‘Yehuda’, lastName: ‘Katz’ }); Ember.get(yehuda, ’friends’).push(tom) const Person = Ember.Object.extend({ init() { this.friends = Ember.A(); } });
117. let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ }); let yehuda = Person.create({ firstName: ‘Yehuda’, lastName: ‘Katz’ }); const Person = Ember.Object.extend({ init() { this.friends = Ember.A(); }, bffs: Ember.computed.filterBy(‘friends’, ‘bff’, true); });
118. let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ }); let yehuda = Person.create({ firstName: ‘Yehuda’, lastName: ‘Katz’ }); Ember.get(yehuda, ’friends’).push({ friend: tom, bff: true }) const Person = Ember.Object.extend({ init() { this.friends = Ember.A(); }, bffs: Ember.computed.filterBy(‘friends’, ‘bff’, true); });
119. let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ }); let yehuda = Person.create({ firstName: ‘Yehuda’, lastName: ‘Katz’ }); Ember.get(yehuda, ’friends’).push({ friend: tom, bff: true }) const Person = Ember.Object.extend({ init() { this.friends = Ember.A(); }, bffs: Ember.computed.filterBy(‘friends’, ‘bff’, true); }); Ember.get(yehuda, ’friends') // -> [{ friend: tom, bff: true }]
120. let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ }); let yehuda = Person.create({ firstName: ‘Yehuda’, lastName: ‘Katz’ }); Ember.get(yehuda, ’friends’).push({ friend: tom, bff: true }) const Person = Ember.Object.extend({ init() { this.friends = Ember.A(); }, bffs: Ember.computed.filterBy(‘friends’, ‘bff’, true); }); Ember.get(yehuda, ’friends') // -> [{ friend: tom, bff: true }] Ember.get(yehuda, ’bffs') // -> []
121. let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ }); let yehuda = Person.create({ firstName: ‘Yehuda’, lastName: ‘Katz’ }); const Person = Ember.Object.extend({ init() { this.friends = Ember.A(); }, bffs: Ember.computed.filterBy(‘friends’, ‘bff’, true); });
122. let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ }); let yehuda = Person.create({ firstName: ‘Yehuda’, lastName: ‘Katz’ }); Ember.get(yehuda, ’friends’).pushObject({ friend: tom, bff: true }) const Person = Ember.Object.extend({ init() { this.friends = Ember.A(); }, bffs: Ember.computed.filterBy(‘friends’, ‘bff’, true); });
123. let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ }); let yehuda = Person.create({ firstName: ‘Yehuda’, lastName: ‘Katz’ }); Ember.get(yehuda, ’friends’).pushObject({ friend: tom, bff: true }) const Person = Ember.Object.extend({ init() { this.friends = Ember.A(); }, bffs: Ember.computed.filterBy(‘friends’, ‘bff’, true); }); Ember.get(yehuda, ’friends') // -> [{ friend: tom, bff: true }]
124. let tom = Person.create({ firstName: ‘Tom’, lastName: ‘Dale’ }); let yehuda = Person.create({ firstName: ‘Yehuda’, lastName: ‘Katz’ }); Ember.get(yehuda, ’friends’).pushObject({ friend: tom, bff: true }) const Person = Ember.Object.extend({ init() { this.friends = Ember.A(); }, bffs: Ember.computed.filterBy(‘friends’, ‘bff’, true); }); Ember.get(yehuda, ’friends') // -> [{ friend: tom, bff: true }] Ember.get(yehuda, ’bffs') // -> [{ friend: tom, bff: true }]
125. BONUS: Ember’s Object model in the future
126. class Person { @computed(‘firstName’, ‘lastName’) get fullName() { return `${this.firstName} ${this.lastName}`; } }); let tom = new Person(); tom.firstName = ‘Tom’; tom.lastName = ‘Dale’;
127. class Person { @computed(‘firstName’, ‘lastName’) get fullName() { return `${this.firstName} ${this.lastName}`; } }); let tom = new Person(); tom.firstName = ‘Tom’; tom.lastName = ‘Dale’; tom.firstName // -> 'Tom'
128. class Person { @computed(‘firstName’, ‘lastName’) get fullName() { return `${this.firstName} ${this.lastName}`; } }); let tom = new Person(); tom.firstName = ‘Tom’; tom.lastName = ‘Dale’; tom.firstName // -> 'Tom' tom.lastName // -> 'Dale'
129. class Person { @computed(‘firstName’, ‘lastName’) get fullName() { return `${this.firstName} ${this.lastName}`; } }); let tom = new Person(); tom.firstName = ‘Tom’; tom.lastName = ‘Dale’; tom.firstName // -> 'Tom' tom.lastName // -> 'Dale' tom.fullName // -> 'Tom Dale'