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:01]
jcheron
richclient:emberjs:modelobjet [2018/01/20 16:55] (Version actuelle)
jcheron [Héritage/surdéfinition]
Ligne 4: Ligne 4:
  
 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]]. 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.1516460506.txt.gz · Dernière modification: 2018/01/20 16:01 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