Différences

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

--- richclient:emberjs:modelobjet:computed [2018/01/21 12:54] – [Macros] jcheron
+++ richclient:emberjs:modelobjet:computed [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 34: / Ligne 34: @@
 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 =====
@@ Ligne 62: / Ligne 94: @@
 |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 |