web_2025/R4.01_R4.A.10/td_tp/tp2mvc

Ex3 : modele MVC

Le but est d'écrire une todolist en javascript, en respectant le pattern MVC. Il est important de mener à bout cet exercice, car il nous servira de fil rouge notamment en ajoutant une api rest et ajax pour la communication avec le service.

Le contrôleur a accès à la vue et au modèle.

Le modèle

Cette "classe" (rien à compléter) utilise l'objet localStorage pour sauvegarder la todolist.

Chaque todo est un objet json de la forme

{ id : 1 , text : "apprendre le js", done : false }

La liste des méthodes publiques de cette classe

/** @brief return the todolist
 *  @param filter "all" or "active" or "done"
 *  @return  array of todos
 */
getTodos(filter)

/** @brief add (and save) a new todo with todoText
 *  @param todoText : text of the new todo
 */
add(todoText)

/** @brief delete a todo 
 *  @param id id of the todo 
 */
delete(id)

/** @brief update a todo 
 *  @param id id of the todo 
 */
edit(id,updatedText)

/** @brief toggle  a todo (done<->active)
 *  @param id id of the todo 
 *  @param updatedText  text of the todo
 */
toggle(id)

La vue

Cette "classe" permet au contrôleur de gérer la vue.

Liste des méthodes publiques

/** @brief change the active tab (all,active or done)
 *  @param filter the active tab (all, active or done)
 */
setFilterTabs(filter)

/** @brief update the todo list with todos
 *  @param todos array of todo
 */ 
renderTodoList(todos)

Le contrôleur peut s'abonner (notification de la vue au acontrôleur) aux événements suivants :

add/delete/edit/toggle todo : avec bind{Add|Delete|Edit|Toggle}Todo

Ces méthodes d'abonnement prennent en paramètre une fonction du contrôleur qui est appelé par la vue pour lui notifier une requête.

/** @brief subscribe to add event 
 *  @param handler function(text)
 */
bindAddTodo(handler)

/** @brief suscribe to delete event 
 *  @param handler function(id) 
 */
bindDeleteTodo(handler)

/** @brief suscribe to edit event
 *  @param handler function(id,text)
 */ 
bindEditTodo(handler)

/** @brief suscribe to toggle event
 *  @param handler function(id)
 */ 
bindToggleTodo(handler)

Le contrôleur

C'est lui qui gére le routage. Il y a trois urls possibles index.html/#/{all|active|done} (listener sur l'évenement dom hashchange.

Liste des méthodes

/** @brief get the todolist from the model
 *         and use the view to render 
 */ 
filterTodoList()

/** @brief binding function called by the view
 *         to add a new todo
 *  @param text text of the new todo
 */
addTodo(text)

/** @brief binding function called by the view
 *         to delete a todo
 *  @param id id of the todo
*/
deleteTodo(id)

/** @brief binding function to toggle the state
 *         of a todo
 *  @param id id of the todo
 */
toggleTodo(id)

/** @brief binding function to change the text
 *         of a todo
 *  @param id id of the todo
 *  @param changedText new text for the todo
*/
editTodo(id,changedText)

Par exemple, lorsque l'utilisateur ajoute une todo :

1. la vue est sensible à l'événement de soumission du formulaire,
2. la fonction reflexe récupére le texte saisie,
3. elle appelle la fonction avec laquelle le contrôleur s'est abonné, en lui passant le texte,
4. la fonction du contrôleur addTodo récupére le texte,
5. le contrôleur demande au modèle la création d'une nouvelle todo,
6. le contrôleur demande un rafraichissement de la vue.

Travail à faire

• Commpléter la méthode privée dans la vue #createNewTodoElement qui permet de créer un nouvel élément dom représentant une todo. Ce qui est attendu est de la forme

  <li class="todo" data-id="1">
   <label>
    <input type="checkbox">
    <span>apprendre un peu de javascript</span>
   </label>
   <i class="fas fa-trash"></i>
  </li>
  

• Compléter la méthode bindDeleteTodo de la vue.
• Compléter la méthode bindToggleTodo de la vue.
• Compléter la méthode bindEditTodo de la vue.