Différences

Ci-dessous, les différences entre deux révisions de la page.

--- richclient:emberjs:modelobjet:computed [2018/01/20 17:12] – créée jcheron
+++ richclient:emberjs:modelobjet:computed [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 1: / Ligne 1: @@
 ====== Computed properties ======
-Pour faire simple, les **computed properties** permettent de déclarer des fonctions en tant que propriétés. Une **computed property** est déclarée en tant que fonction, qu'Ember appellera automatiquement lorsque la propriété sera sollicitée. Une **computed property** est utilisable de la même manière que toute autre propriété statique normale.
+Pour faire simple, les **computed properties** permettent de déclarer des fonctions en tant que propriétés. Une **computed property** est déclarée en tant que fonction, qu'Ember appellera automatiquement lorsque la propriété sera sollicitée.
+Une **computed property** est utilisable de la même manière que toute autre propriété statique normale.
 ===== Déclaration =====
@@ Ligne 30: / Ligne 32: @@
 ironMan.get('fullName'); // "Tony Stark"
 </sxh>
+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 =====
+Certain types de computed properties sont très communs et disposent de macros permettant d'éviter leur réécriture.
+Le cas suivant illustre la computed property macro **equals** :
+<sxh javascript>
+import EmberObject, { computed } from '@ember/object';
+import { equal } from '@ember/object/computed';
+Person = EmberObject.extend({
+  fullName: 'Tony Stark',
+  isIronManLongWay: computed('fullName', function() {
+    return this.get('fullName') === 'Tony Stark';
+  }),
+  isIronManShortWay: equal('fullName', 'Tony Stark')
+});
+</sxh>
+|< 100% >|
+^Macro ^Exemple ^Rôle ^
+|and |<sxh javascript;gutter:false>Ember.computed.and('hasWalkingStick', 'hasBackpack')</sxh> | retourne vrai si hasWalkingStick et hasBackpack sont vrais |
+|bool |<sxh javascript;gutter:false>Ember.computed.bool('numBananas')</sxh> |retourne vrai si numBananas est différent de null et >0 |
+|collect |<sxh javascript;gutter:false>Ember.computed.collect('hat', 'shirt')</sxh> |retourne un tableau des valeurs des propriétés |
+|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 |
+|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 |