164 lines
4.1 KiB
Markdown
164 lines
4.1 KiB
Markdown
#### 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.
|
|
|
|
<div align="center">
|
|
<img src="./img/todo.png">
|
|
</div>
|
|
|
|
Le contrôleur a accès à la vue et au modèle.
|
|
|
|
##### Le modèle
|
|
|
|
Cette "classe" (rien à compléter) utilise
|
|
l'objet [localStorage](https://developer.mozilla.org/fr/docs/Web/API/Window/localStorage)
|
|
pour sauvegarder la todolist.
|
|
|
|
Chaque todo est un objet json de la forme
|
|
|
|
```js
|
|
{ id : 1 , text : "apprendre le js", done : false }
|
|
```
|
|
|
|
La liste des méthodes publiques de cette classe
|
|
|
|
```js
|
|
/** @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
|
|
|
|
```js
|
|
/** @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.
|
|
|
|
```js
|
|
/** @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
|
|
```js
|
|
/** @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
|
|
```html
|
|
<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.
|