Ember.js - Question « Un adaptateur modèle <=> template ? »

Problématique

Depuis quelques mois, j'utilise Ember.js dans certain de mes projets.

Dernièrement, j'ai été confronté au problème présenté ci-dessous.

Par exemple, j'ai cette structure de données (couche modèle) :

* Lundi
    * Évenement 1
    * Évenement 2
    * Evenement 3

* Mardi
    * Évenement 4
    * Évenement 5

* Mercredi
    * Évenement 6
    * Évenement 7
    * Évenement 8

Avec deux boucles, je peux facilement réaliser le tableau suivant :

Lundi Évenement 1 Évenement 2 Évenement 3
Mardi Évenement 4 Évenement 5  
Mercredi Évenement 6 Évenement 7 Évenement 8

Pour faire ce tableau, je peux utiliser un template du style :

<table>
    {{#each day in App.day_list}}
    <tr>
        <td>
            {{ day.name }}
        </td>
        {{#each event in day.events}}
        <td>
            {{ event.name }}
        </td>
        {{/each}}
    </tr>
    {{/each}}
</table>

Par contre, il est bien plus difficile (sans changer la structure de données) de réaliser le tableau suivant :

Lundi Mardi Mercredi
Évenement 1 Évenement 4 Évenement 6
Évenement 2 Évenement 5 Évenement 7
Évenement 3   Évenement 8

Ici le tableau est inversé… je ne peux donc pas réaliser ce tableau avec les deux mêmes boucles utilisées dans l'exemple précédent.

La seul solution que j'ai trouvé c'est de fournir un objet de type "vue" qui adapte mon modèle au besoin de ma vue. Seulement ce n'est pas si simple… car :

  • il faut que si les données sont modifiées, que le template soit automatiquement mis à jour… il faut donc une gestion d'évenement entre les objets de la couche modèles et l'objet "vue"
  • en cas d'interactions au niveau de l'interface utilisateur il faut que les données soient automatiquement mis à jour.

Premier exemple, simple

Il est possible de tester le premier exemple simple via ce lien jsFiddle.

Ce qu'il est possible de voir et tester :

  • cliquez sur les liens « Step 1 », « Step 2 », « Step 3 », « Step 4 »
  • ces liens modifient le contenu de la couche modèle
  • dès la première étape, vous pouvez voir deux tableaux identiques… qui affichent le contenu de la couche modèle
  • à chaque étape, vous pouvez modifier la valeur des cellules des tableaux
  • lorsque la valeur d'une cellule est modifiée dans un des deux tableaux, la cellule dans le second tableau est aussi modifiée

Voici ci-dessous un petit screencast de ce premier exemple simple :

Recherche d'une solution pour le « Tableau pivoté »

Comme indiqué plus haut, je cherche une solution pour afficher le même tableau mais pivoté (voir exemple au dessus).

J'ai un début de solution dans ce jsFiddle.

Vous pouvez constater que les étapes 1, 2, 3 fonctionnent.
L'étape 4 ne fonctionne pas…

Au niveau du code source, vous pouvez voir cette ligne commentée à plusieurs endroits :

// App.planning.rows.sync();

C'est cette fonction sync qui synchronise mon objet planning avec les données de la couche modèle dont l'objet de racine est day_list. Cette méthode est automatiquement exécutée par un observateur quand il y a des modifications au niveau de l'objet App.day_list (les sync en commentaire sont simplement là pour voir le comportement que devrait avoir le programme si cette méthode était bien exécutée) :

Ember.addObserver(
    App.day_list,
    '@each.content.@each',
    App.planning.rows,
    'sync'
);

C'est cet observateur qui fonctionne bien pour l'étape 1, 2 et 3 mais pas pour l'étape 4.

Mes questions

  • Avez vous une solution pour que sync soit bien exécuté lors de l'étape 4 ?
  • Est-ce que mon approche est la bonne ?
  • Quel est le nom standard de l'objet que j'appelle "vue" ? est-ce que je suis dans le vrai en disant que c'est un objet de type "vue" ?
  • Est-ce qu'il existe un pattern classique pour ce type de besoin en Ember.js ?
Read and Post Comments

Mes flux :