Différences

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

--- richclient:emberjs:data [2018/01/26 12:45] – créée jcheron
+++ richclient:emberjs:data [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 2: / Ligne 2: @@
 Les Models correspondent aux classes métier de l'application.
 Avec Ember, le chargement des models dans une application peut être découplé du chargement technique des données (interrogation d'un service web par ex) grâce au Store et aux Adapters.
+===== Création de Models =====
+<sxh bash;gutter:false>
+ember generate model person
+</sxh>
+Ce qui génère le Model suivant :
+<sxh javascript;title:app/models/person.js>
+import DS from 'ember-data';
+export default DS.Model.extend({
+});
+</sxh>
+===== Ajout d'attributs =====
+Ajout d'attribut avec la méthode **DS.attr** :
+<sxh javascript;title:app/models/person.js>
+import DS from 'ember-data';
+export default DS.Model.extend({
+  firstName: DS.attr(),
+  lastName: DS.attr(),
+  birthday: DS.attr()
+});
+</sxh>
+Un model peut aussi définir des computed properties :
+<sxh javascript;title:app/models/person.js>
+import DS from 'ember-data';
+import { computed } from '@ember/object';
+export default DS.Model.extend({
+  firstName: DS.attr(),
+  lastName: DS.attr(),
+  fullName: computed('firstName', 'lastName', function() {
+    return `${this.get('firstName')} ${this.get('lastName')}`;
+  })
+});
+</sxh>
+==== Transforms : dataTypes ====
+La méthode **DS.attr** peut définir le type de données en passant en paramètre un transformer :
+<sxh javascript;title:app/models/person.js>
+import DS from 'ember-data';
+export default DS.Model.extend({
+  name: DS.attr('string'),
+  age: DS.attr('number'),
+  admin: DS.attr('boolean'),
+  birthday: DS.attr('date')
+});
+</sxh>
+  * **date** transforme une chaîne au format ISO en un objet javascript **Date**
+  * **boolean** convertit une chaîne en booléen False ou True
+Il est également possible de définir ses propres transformers : voir [[https://guides.emberjs.com/v2.18.0/models/defining-models/#toc_custom-transforms|Custom transforms]]
+==== Default value ====
+<sxh javascript;title:app/models/person.js>
+import DS from 'ember-data';
+export default DS.Model.extend({
+  username: DS.attr('string'),
+  email: DS.attr('string'),
+  verified: DS.attr('boolean', { defaultValue: false }),
+  createdAt: DS.attr('date', {
+    defaultValue() { return new Date(); }
+  })
+});
+</sxh>