Formation Ember - Mécanismes sous-jacents

Dans la console, créer une classe Book qui étend Ember.Object et définit une méthode logTitle affichant en console une chaîne de caractères (le titre) passée en paramètre.

> Book = Ember.Object.extend({
    logTitle(title) {
      console.log(title);
    }
  });

Instancier cette classe et afficher un titre dans la console

> one = new Book();
> one.logTitle("titre");

Modifier la classe Book en conséquence et créer l’objet via la méthode create() d’Ember en initialisant un champs title.

> Book = Ember.Object.extend({
    logTitle() {
      console.log(this.title);
    }
  });

> one = Book.create({title: "My Title"});
> one.logTitle();

L’utilisation de la méthode create() en lieu et place d’un simple new permet l’initialisation de propriétés via un objet passé en paramètre. La méthode create permet également d’effectuer des opérations d’initialisations complémentaires via l’appel de la méthode init().

Ajouter une méthode d’initialisation qui réalise un simple log console du titre passé au create. Le résultat doit être le suivant :

> one = Book.create({title: "My Title"});
My Title

> Book = Ember.Object.extend({
    init() {
      this.logTitle();
    },
    logTitle() {
      console.log(this.title);
    }
  });

Modifier la classe Book pour lui ajouter une méthode logType qui affiche “Book”. Le résultat doit être le suivant :

> one = Book.create({title: "My Title"});
My Title
   
> one.logType();
Book

> Book = Ember.Object.extend({
    ...
    logType() {
      console.log("Book");
    }
  });

Définir une classe Comic qui étend Book et surcharge la méthode logType en affichant Comic.

On doit pouvoir effectuer les opérations suivantes :

> one = Comic.create({title: "My Title"});
My Title
   
> one.logType();
Comic

>  Comic = Book.extend({
     logType() {
       console.log("Comic");
     }
   });

Modifier Comic de sorte que logType affiche également le type de la classe mère.

On doit pouvoir effectuer les opérations suivantes :

> one = Comic.create({title: "My Title"});
My Title
   
> one.logType();
Book
Comic

> Commic = Book.extend({
    ...
    logType() {
      this._super();
      console.log("Comic");
    }
  });

L’appel à la méthode mère doit donc être explicite. Lorsque vous héritez d’un objet Ember (Controller, Route, etc.) et que vous surchargez la méthode init dans votre implémentation, soyez sûr de bien appeler la méthode _super au tout début de l’init. Dans le cas contraire, les traitements d’initialisation standard prévus par Ember ne pourraient pas s’exécuter correctement entraînant des comportements erratiques.

Copier le contenu suivant dans le fichier html créé, juste avant la balise </head>:

<script>
  Book = Ember.Object.extend({
    init() {
      this.displayTitle();
    },
    displayTitle() {
      console.log(this.title);
    },
    logType() {
      console.log("Book");
    }
  });
   
  Comic = Book.extend({
    logType() {
      this._super();
      console.log("Comic");
    }
  });
   
  one = Comic.create({title: "My Title"});
   
  App = Ember.Application.create();
   
  App.ApplicationController = Ember.Controller.extend({
    comic: one
  });
</script>
   
<script type="text/x-handlebars">
  <p>
    {{comic.title}}
  </p>
</script>

Effectuer les opérations suivantes sur l’instance one :

> one.title;
> one.get("title");
> one.title = "new title";
> one.set("title", "new title");
> one.get("title");

Les résultats sont les suivants :

> one.title;
"My Title"

> one.get("title");
"My Title"

> one.title = "new title";
Error: Assertion Failed: You must use set() to set the `title` property ...

> one.set("title", "new title");
"new title"

> one.get("title");
"new title"

Dans la console, réouvrir la classe Book et lui ajouter une propriété pages.

  > Book.reopen({
       pages: 10
    });

Afficher la valeur de pages sur l’instance existante one en utilisant l’accesseur. Que constate-t-on ?

  > one.get('pages');
  undefined

On constate que la propriété n’est pas définie.

Créer une nouvelle instance two de Book puis afficher la valeur de pages sur cette instance. Afficher de nouveau la valeur de pages sur l’instance one. Que constate-t-on sur chacune de ces deux instances ? Pourquoi ?

  > two = Book.create({title: 'two'})
  two

  > two.get('pages');
  10

  > one.get('pages');
  10

On constate que la propriété a bien été définie et initialisée dans nos deux instances. Y compris l’instance one qui existait déjà. Les propriétés et méthodes ajoutées par reopen ne sont donc ajoutées effectivement au prototype de la classe que lors de la prochaine création d’une instance de cette classe, en mode lazy. cf. cette discussion

Lors de l’utilisation de reopen, il est possible, tout comme dans le cas d’un héritage, de redéfinir une méthode existante mais également d’utiliser la méthode _super(...) pour appeler la méhode définie précédement. Utiliser reopen pour redéfinir displayTitle et afficher une ligne Title: avant d’afficher le titre.

  > Book.reopen({
      displayTitle() {
        console.log('Title:');
        this._super();
     }});

 > three = Book.create({title: 'three'});
 Title:
 three

Utiliser reopenClass pour ajouter une propriété canBeRead à la classe Book. Afficher la valeur de cette propriété statique dans la console.

  > Book.reopenClass({
      canBeRead: true
    })

 > Book.canBeRead
 true

 > four = Book.create({title: 'four'})
 > four.canBeRead
 undefined

Réouvrir la classe Comic pour y ajouter deux propriétés writer et drawer ainsi qu’une propriété calculée authors dont la valeur correspond à la concaténation des deux propriétés précédentes séparées par ' and '. La propriété calculée authors doit afficher un log d’exécution quelconque et son exécution doit dépendre des deux propriétés writer et drawer.

Créer ensuite une instance de Comic puis accéder plusieurs fois de suite à la propriété authors. Changer ensuite l’une des deux propriétés writer et drawer (via un set) et accéder de nouveau à authors. Que constate-t-on lors de ces différentes opérations ? En quoi une propriété calculée est différente d’une simple méthode ?

> Comic.reopen({
    writer: null,
    drawer: null,
    authors: Ember.computed('writer', 'drawer', function() {
      console.log('computed property calculated');
      return this.get('writer') + ' and ' + this.get('drawer');
    })
  });

> five = Comic.create({title:'five', writer: '5 writer', drawer: '5 drawer'});
five
Object { title: "five", writer: "5 writer", drawer: "5 drawer", _super: ROOT(), … }

> five.get('authors');
computed property calculated
"5 writer and 5 drawer"

> five.get('authors');
"5 writer and 5 drawer"

> five.set('writer', 'new writer');
"new writer"

> five.get('authors');
computed property calculated
"new writer and 5 drawer"

> five.get('authors');
"new writer and 5 drawer"

On constate qu’une propriété calculée est bien différente d’une fonction en ce sens qu’Ember calcule sa valeur en fonction du contexte dont elle dépend. Cette valeur n’est ensuite recalculée que si ce contexte est modifié. Dans le cas contraire, Ember se contente de renvoyer la précédente valeur mise en cache, d’où l’absence de log dans ce cas.

Modifier la déclaration de la propriété calculée authors en supprimant la dépendance aux deux propriétés writer et drawer. Réexécuter ensuite la série d’opérations précédente. Que constate-t-on ?

 > Comic.reopen({
     writer: null,
     drawer: null,
     authors: Ember.computed(function() {
       console.log('computed property calculated');
       return this.get('writer') + ' and ' + this.get('drawer');
     })
   });

 > five = Comic.create({title:'five', writer: '5 writer', drawer: '5 drawer'});
 five
 Class {title: "five", writer: "5 writer", drawer: "5 drawer", __ember1439469290671: null, __nextSuper: undefined…}

 > five.get('authors');
 computed property calculated
 "5 writer and 5 drawer"

 > five.get('authors');
 "5 writer and 5 drawer"

 > five.set('writer', 'new writer');
 "new writer"

 > five.get('authors');
 "5 writer and 5 drawer"

On s’aperçoit ici que la propriété n’est pas recalculée lorsque l’on change l’une des propriétés puisqu’elle ne dépend plus de ces propriétés. Ember utilisera donc toujours la valeur calculée cachée de cette propriété puisque, pour lui, celle-ci ne peut pas changer.

Réouvrir la classe Comic et ajouter une nouvelle propriété calculée summary qui retourne une concaténation du titre et des auteurs de la série lorsque l’une des propriétés title ou authors change. Modifier ensuite la valeur de la propriété writer et constater que authors et summary ont été correctement mises à jour (Ne pas oublier de redéclarer writer et drawer comme propriétés dont authors dépend).

> Comic.reopen({
    authors: Ember.computed('writer', 'drawer', function() {
      console.log('computed property calculated');
      return this.get('writer') + ' and ' + this.get('drawer');
    }),
    summary: Ember.computed('title', 'authors', function() {
      return this.get('title') + ' by ' + this.get('authors');
    })
  });

> five = Comic.create({title:'five', writer: '5 writer', drawer: '5 drawer'});
five
Class {title: "five", writer: "5 writer", drawer: "5 drawer", __ember1439469290671: null, __nextSuper: undefined…}

> five.get('summary');
computed property calculated
"five by 5 writer and 5 drawer"

> five.set('writer', 'new writer');
"new writer"

> five.get('summary');
"five by new writer and 5 drawer"

Réouvrir la classe Comic de manière à modifier la propriété authors pour lui fournir un setter afin de mettre à jour writer et drawer lorsque l’on modifie authors. L’objectif est de permettre la séquence suivante :

> five = Comic.create({title:'five', writer: '5 writer', drawer: '5 drawer'});
Object { title: "five", writer: "5 writer", drawer: "5 drawer", _super: ROOT(), … }

> five.set('authors', 'Véronique and Davina');
"Véronique and Davina"
   
> five.get('writer');
"Véronique"
   
> five.get('drawer');
"Davina"

Comic.reopen({
  authors: Ember.computed('writer', 'drawer', {
    get(key) {
      console.log('computed property calculated');
      return this.get('writer') + ' and ' + this.get('drawer');
    },
    set(key, value) {
      console.log('computed property modified');
      const authors = value.split(/ and /);
      this.set('writer', authors[0]);
      this.set('drawer', authors[1]);
      return value;
    }
  })
});

NB : Il est nécessaire d’utiliser Ember.computed à cause de certaines incompatibilités de syntaxe sur les navigateurs actuels.

Réouvrir Book pour y ajouter une propriété isPublished par défaut à false. Créer ensuite une nouvelle classe Collection contenant un ensemble de comic. Enfin, créer deux nouvelles séries :

> Book.reopen({
    isPublished: false
  });
   
> Collection = Ember.Object.extend({ 
    books: [] 
  });
   
> two = Comic.create({title:'two', isPublished: true});
> three = Comic.create({title:'three'});

Réouvrir Collection pour y ajouter une propriété calculée permettant de compter le nombre de livres publiés au sein de la collection. Cette propriété doit être déclenchée lors de la modification de l’un des statuts isPublished des éléments de la collection books, lors d’un ajout ou d’une suppression (books.@each.isPublished). Cette propriété retourne le nombre de livres publiés dans la collection. Placer un log dans la fonction de manière à tracer son exécution.

Créer ensuite une collection contenant les trois séries créées.

Constater que cette propriété est bien mise à jour (calculée) lorsque l’on change la valeur de la propriété isPublished de l’une des trois série ou lorsque l’on en supprime une. En revanche, elle n’est pas exécutée lorsque n’importe quelle autre propriété d’une série est modifiée.

> Collection.reopen({
    numberOfPublished: Ember.computed('books.@each.isPublished', function() {
      console.log("compute numberOfPublished");
      return this.get('books').filterBy('isPublished', true).length;
    })
  });

> newCollection = Collection.create({books: [one, two, three]});
Object { books: […], … }

> newCollection.get('numberOfPublished');
compute numberOfPublished
1

> one.set('isPublished', true);
true

> newCollection.get('numberOfPublished');
compute numberOfPublished
2

> newCollection.get('books').removeAt(0);
Array [ {…}, {…} ]

> newCollection.get('numberOfPublished');
compute numberOfPublished
1

> two.set('writer', 'new writer');
"new writer"

> newCollection.get('numberOfPublished');
1

Réouvrir Collection pour changer les conditions de dépendance de la propriété calculée en supprimant le filtre supplémentaire sur la propriété isPublished (books.[]).

Créer ensuite une collection contenant les trois séries créées.

Constater que cette propriété n’est mise à jour (calculée) que lors d’un ajout ou d’une suppression dans la liste des séries. La modification d’une propriété d’un élément de la liste (quelque soit cette propriété) ne déclenche pas l’éxécution de la fonction.

> Collection.reopen({
    numberOfPublished: Ember.computed('books.[]', function() {
      console.log("compute numberOfPublished");
      return this.get('books').filterBy('isPublished', true).length;
    })
  });

> newCollection = Collection.create({books: [one, two, three]});
Object { books: […], … }

> newCollection.get('numberOfPublished');
compute numberOfPublished
2

> three.set('isPublished', true);
true

> newCollection.get('numberOfPublished');
2

> newCollection.get('books').removeAt(0);
Array [ {…}, {…} ]

> newCollection.get('numberOfPublished');
compute numberOfPublished
2

> newCollection.get('books').removeAt(0);
Array [ {…} ]

> newCollection.get('numberOfPublished');
compute numberOfPublished
1

Modifier enfin une dernière fois Collection et la propriété numberOfPublished pour faire en sorte que la propriété soit recalculée à la fois lors de la modification d’un livre existant et lors de l’ajout ou la suppression d’un livre.

> Collection.reopen({
    numberOfPublished: Ember.computed('books.[]', 'books.@each.isPublished', function() {
      console.log("compute numberOfPublished");
      return this.get('books').filterBy('isPublished', true).length;
    })
  });

> newCollection = Collection.create({books: [one, two, three]});
Object { books: […], … }

> newCollection.get('numberOfPublished');
compute numberOfPublished
3

> three.set('isPublished', false);
false

> newCollection.get('numberOfPublished');
compute numberOfPublished
2

> newCollection.get('books').removeAt(0);
Array [ {…}, {…} ]

> newCollection.get('numberOfPublished');
compute numberOfPublished
1

> newCollection.get('books').pushObject(one);
Object { title: Getter & Setter, isPublished: Getter & Setter, … }

> newCollection.get('numberOfPublished');
compute numberOfPublished
2

Déclarer un observeur du changement de la propriété calculée authors. Créer une nouvelle instance de Comic et noter le moment où l’observeur est appelé.

> Comic.reopen({
    authorsChanged: Ember.observer('authors', function() {
      console.log('authors observer called');
    })
  });
 
> six = Comic.create({title:'six', writer: '6 writer', drawer: '6 drawer'});
Object { title: "six", writer: "6 writer", drawer: "6 drawer", … }
 
> six.get('authors');
computed property calculated
"6 writer and 6 drawer"
 
> six.set('writer', 'new writer');
authors observer called
"new writer"