Vue - Geoffrey013/oc-p8-Take-existing-project-over GitHub Wiki
La Vue
Le fichier View.js va jouer le rôle de la Vue. Elle va dans un premier temps, via sa méthode bind, permettre de déclarer l’ensemble des écouteurs d’événements, et de récupérer les données de certains éléments du DOM ($newTodo = qs('.new-todo')). Cela va notamment permettre au Contrôleur d’associer ses propres méthodes aux bons événements et avec les bonnes données.
De plus la Vue, en association avec le fichier template.js, elle va permettre de gérer l’apparence de la page, de mettre à jour le DOM, notamment depuis sa méthode render qui prendra en paramètre les données mises à jour provenant du Modèle à la demande du Contrôleur.
render va donc regrouper l'ensemble des méthodes visant à manipuler le visuel de la page, montrer le contenu (showEntries), suppression (removeItem), barrer une tâche completée avec l’affichage du bouton “complété” (elementCompleted)
template.js va à la demande de la Vue, générer le code HTML qui sera ensuite ajouté à la page.
En partant d'un modèle de base (defaultTemplate), ensemble de balises li et div représentant un Todo dans le DOM, template.js va mettre à jour ses informations avec les données reçues par la Vue (titre du todo, est-il complété ou pas...). Ensuite il va retourner un morceau de DOM sous forme de chaîne de caractères correspondant à la liste actuelle.
La Vue pourra ensuite mettre à jour le DOM.
View.js
| méthode | arguments | description |
|---|---|---|
| bind | event(string) handler(function) | permet de déclarer l’ensemble des écouteurs d'événements (click, double-click…) et de les associer à la bonne méthode |
| render | viewCmd(string) parameter(object) | Exécute la commande passée en paramètre en appelant sa méthode privée correspondante. Permet de mettre à jour le DOM en appelant la méthode passée en argument (viewCmd), avec ses nouveaux paramètres (parameter) |
| _removeItem | id(number) | supprime un todo dans le DOM (vue) grâce à son id (li[data-id=id]) |
| _clearCompletedButton | completedCount(Number) visible(booleen) | rend visible ou non le bouton "clear completed" |
| _setFilter | currentPage(string) | sélectionne les éléments du Dom selon le chemin actuel (tous, actifs uniquement, complétés uniquement). Met à jour le DOM en encadrant le filtre appliqué (All, Active ou Completed) en lui attribuant la class selected |
| _elementComplete | id(number) completed(boolean) | selon le statut (terminé ou non) du todo, attribue un nom de class completed ou '' |
| _editItem | id(number) title(string) | fait apparaitre un input à la place du todo afin de permettre la modification du titre par l'utilisateur |
| _editItemDone | id(number) title(string) | remet un todo à son visuel de base li lorsque l'édition du titre est terminée (disparition de l’input) |
| _itemId | element(object) | retourne l'id d'un élément du Dom depuis son attribut html data-id sous forme de nombre |
| _bindItemEditDone | handler(function) | permet de déclarer l’évenement: quitte le mode édition si l'on clique en dehors de la zone de saisie |
| _bindItemEditCancel | handler(function) | permet de déclarer l’évenement: quitte le mode édition si l'on appuie sur la touche echap |
template.js
| méthode | arguments | description |
|---|---|---|
| show | data(object) | retourne un ensemble d'éléments HTML sous forme de chaîne de caractères, les balises sont complétées avec le data passé en paramètre (titre, nom de classe...) |
| itemCounter | activeTodos(number) | retourne la chaîne de caractères "x item(s) left" en conjuguant "item" correctement selon le nombre de todos actifs |
| clearCompletedButton | completedTodos(number) | retourne une chaîne de caractères pour le bouton de suppression de todos terminés. Selon le cas (si nous avons des todos complets), la chaîne est soit vide soit contient le texte "clear completed" |