Différences

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

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision
Révision précédente
richclient:emberjs:modelobjet [2018/01/20 16:22]
jcheron
richclient:emberjs:modelobjet [2018/01/20 16:55] (Version actuelle)
jcheron [Héritage/surdéfinition]
Ligne 14: Ligne 14:
  
 const Person = EmberObject.extend({ const Person = EmberObject.extend({
-  name:'',​ 
   say(thing) {   say(thing) {
     alert(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>​ </​sxh>​
  
 ===== Initialisation/​construction ===== ===== 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>​ <sxh javascript>​
 +import EmberObject from '​@ember/​object';​
 +
 +const Person = EmberObject.extend({
 +  name: '​Robert Jackson'​
 +});
 +
 let person = Person.create();​ 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>​ </​sxh>​
 +
  
  
  
richclient/emberjs/modelobjet.1516461766.txt.gz · Dernière modification: 2018/01/20 16:22 par jcheron
GNU Free Documentation License 1.3
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0