Différences

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

Lien vers cette vue comparative

Prochaine révision
Révision précédente
richclient:emberjs:modelobjet [2018/01/20 15:59]
jcheron créée
richclient:emberjs:modelobjet [2018/01/20 16:55] (Version actuelle)
jcheron [Héritage/surdéfinition]
Ligne 1: Ligne 1:
 ====== Model objet ====== ====== Model objet ======
  
-Les objets Javascript ne supportant pas l'​observation des changements de leurs propriétés,​ une application Ember utilisera des objets [[https://​www.emberjs.com/​api/​ember/​2.16/​modules/​@ember%2Fobject|Ember.Object]] pour mettre en place le binding des propriétés.+Les objets Javascript ne supportant pas l'​observation des changements de leurs propriétés,​ une application Ember utilisera des objets [[https://​www.emberjs.com/​api/​ember/​2.16/​modules/​@ember%2Fobject|Ember.Object]] pour mettre en place le binding des propriétés ​en lieu et place des objets javascript standards. 
 + 
 +De la même façon, Ember étend l'​objet Array javascript par la classe [[http://​emberjs.com/​api/​classes/​Ember.Enumerable.html|Ember.Enumerable]]. 
 + 
 +===== Création de classes ===== 
 + 
 + 
 +La création de classe se fait en utilisant la méthode extend sur la classe Ember.Object : 
 + 
 +<sxh javascript>​ 
 +import EmberObject from '​@ember/​object';​ 
 + 
 +const Person = EmberObject.extend({ 
 +  say(thing) { 
 +    alert(thing);​ 
 +  } 
 +}); 
 +</​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';​ 
 + 
 +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.get('​name'​);​ // '​Robert Jackson'​ 
 +person.set('​name',​ '​Tobias Fünke'​);​ 
 +person.get('​name'​);​ // '​Tobias Fünke'​ 
 +</​sxh>​ 
 + 
 + 
  
richclient/emberjs/modelobjet.1516460342.txt.gz · Dernière modification: 2018/01/20 15:59 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