Différences

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

--- richclient:emberjs:modelobjet [2018/01/20 16:22] – jcheron
+++ richclient:emberjs:modelobjet [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 14: / Ligne 14: @@
 const Person = EmberObject.extend({
-  name:'',
   say(thing) {
     alert(thing);
-  },
-  toString(){
-      return $this.get('name');
   }
 });
+</sxh>
+===== Instanciation =====
+L'instanciation d'un objet se fait par appel de la méthode **create** sur la classe.
+<sxh javascript>
+let person = Person.create();
+person.say('Hello'); // alerts " says: Hello"
+</sxh>
+La méthode create accepte en paramètre un objet js permettant d'initialiser/créer des membres :
+<sxh javascript>
+import EmberObject from '@ember/object';
+const Person = EmberObject.extend({
+  helloWorld() {
+    alert(`Hi, my name is ${this.get('name')}`);
+  }
+});
+let tom = Person.create({
+  name: 'Tom Dale'
+});
+tom.helloWorld(); // alerts "Hi, my name is Tom Dale"
+</sxh>
+===== Héritage/surdéfinition =====
+  * L'héritage est mis en place grace à la méthode **extend()**
+  * La surdéfinition par l'appel de **_super()**
+<sxh javascript>
+import EmberObject from '@ember/object';
+const Person = EmberObject.extend({
+  say(thing) {
+    alert(`${this.get('name')} says: ${thing}`);
+  }
+});
+const Soldier = Person.extend({
+  say(thing) {
+    // this will call the method in the parent class (Person#say), appending
+    // the string ', sir!' to the variable `thing` passed in
+    this._super(`${thing}, sir!`);
+  }
+});
+let yehuda = Soldier.create({
+  name: 'Yehuda Katz'
+});
+yehuda.say('Yes'); // alerts "Yehuda Katz says: Yes, sir!"
 </sxh>
 ===== Initialisation/construction =====
+Quand un objet est instancié, la méthode **init()** de sa classe est invoquée automatiquement.
+<sxh javascript>
+import EmberObject from '@ember/object';
-===== Instanciation =====
+const Person = EmberObject.extend({
+  init() {
+    alert(`${this.get('name')}, reporting for duty!`);
+  }
+});
+Person.create({
+  name: 'Stefan Penner'
+});
+// alerts "Stefan Penner, reporting for duty!"
+</sxh>
+La méthode init permet d'initialiser chaque instance.
+===== getters/setters =====
+L'accès aux propriétés d'un objet doit se faire en passant par les accesseurs **get()** et **set()**, faute de quoi computed properties et observers ne sont pas sollicités et ne mettent pas à jour les données (dans un template par exemple)
 <sxh javascript>
+import EmberObject from '@ember/object';
+const Person = EmberObject.extend({
+  name: 'Robert Jackson'
+});
 let person = Person.create();
-person.say('Hello'); // alerts " says: Hello"
+person.get('name'); // 'Robert Jackson'
+person.set('name', 'Tobias Fünke');
+person.get('name'); // 'Tobias Fünke'
 </sxh>