| Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente |
| richclient:emberjs:modelobjet:computed [2018/01/21 12:50] – [Macros] jcheron | richclient:emberjs:modelobjet:computed [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1 |
|---|
| |
| Dans ce cas, la propriété **fullName** sera automatiquement mise à jour sur les changements de **firstName** ou **lastName**. | Dans ce cas, la propriété **fullName** sera automatiquement mise à jour sur les changements de **firstName** ou **lastName**. |
| | |
| | ===== Affectation : setter ===== |
| | Il est possible de faire en sorte qu'une computed property soit modifiable :\\ |
| | Il suffit dans ce cas de définir sa méthode **set** : |
| | |
| | <sxh javascript> |
| | import EmberObject, { computed } from '@ember/object'; |
| | |
| | Person = EmberObject.extend({ |
| | firstName: null, |
| | lastName: null, |
| | |
| | fullName: computed('firstName', 'lastName', { |
| | get(key) { |
| | return `${this.get('firstName')} ${this.get('lastName')}`; |
| | }, |
| | set(key, value) { |
| | let [firstName, lastName] = value.split(/\s+/); |
| | this.set('firstName', firstName); |
| | this.set('lastName', lastName); |
| | return value; |
| | } |
| | }) |
| | }); |
| | |
| | |
| | let captainAmerica = Person.create(); |
| | captainAmerica.set('fullName', 'William Burnside'); |
| | captainAmerica.get('firstName'); // William |
| | captainAmerica.get('lastName'); // Burnside |
| | </sxh> |
| | |
| |
| ===== Macros ===== | ===== Macros ===== |
| |< 100% >| | |< 100% >| |
| ^Macro ^Exemple ^Rôle ^ | ^Macro ^Exemple ^Rôle ^ |
| |and(keys) | | effectue un ET logique entre les propriétés passées | | |and |<sxh javascript;gutter:false>Ember.computed.and('hasWalkingStick', 'hasBackpack')</sxh> | retourne vrai si hasWalkingStick et hasBackpack sont vrais | |
| |bool(keys) | |convertit en booléen les propriétés | | |bool |<sxh javascript;gutter:false>Ember.computed.bool('numBananas')</sxh> |retourne vrai si numBananas est différent de null et >0 | |
| |collect(keys) | |retourne un tableau des valeurs des propriétés | | |collect |<sxh javascript;gutter:false>Ember.computed.collect('hat', 'shirt')</sxh> |retourne un tableau des valeurs des propriétés | |
| |empty(keys) | |retourne vrai si les propriétés passées sont vides (null, chaîne vide, tableau vide...) | | |empty |<sxh javascript;gutter:false>Ember.computed.empty('todos')</sxh> |retourne vrai si les propriétés passées sont vides (null, chaîne vide, tableau vide...) | |
| |equal |<sxh javascript;gutter:false>Ember.computed.equal('percentCarrotsEaten', 100)</sxh> | retourne vrai si percentCarrotEaten est égal à 100 | | |equal |<sxh javascript;gutter:false>Ember.computed.equal('percentCarrotsEaten', 100)</sxh> | retourne vrai si percentCarrotEaten est égal à 100 | |
| | |filter |<sxh javascript;gutter:false>let Hamster = Ember.Object.extend({ |
| | remainingChores: Ember.computed.filter('chores.@each.done', function(chore, index, array) { |
| | return !chore.get('done'); |
| | }) |
| | });</sxh> | retourne la liste des éléments correspondant au critère | |
| | |filterBy |<sxh javascript;gutter:false>let Hamster = Ember.Object.extend({ |
| | remainingChores: Ember.computed.filterBy('chores', 'done', false) |
| | });</sxh> | retourne la liste des éléments correspondant au critère | |
| | |
| |