Utilisation de template :
/**
*
* @constructor
*/
class Template {
constructor() {
this.defaultTemplate = ` // notez le `
<li data-id="{{id}}" class=""> // notez {{}} un code utilisé pour remplacer la valeur
<div class="view">
<input class="toggle" type="checkbox" />
<label>{{title}}</label>
<button class="destroy"></button>
</div>
</li>
` // fin
}
show = function(data) { //data = [tableau d'objets issus d'une bibliothèque]
let view = ''
for (let v of data) { // v est un objet contenant les informations
let template = this.defaultTemplate;
template = template.replace('{{id}}', v.id)
template = template.replace('{{title}}', v.title)
view = view + template
}
return view // une concaténation de <li>
}
}
let view = new Template();
let li = view.show([{
id: 1,
title: "Hello",
},
{
id: 2,
title: "World",
}
])
// insertion des <li> dans le DOM <ul>
document.querySelector(".todo-list").insertAdjacentHTML("afterbegin", li);
Remarque :
on pourra préférer cette écriture utilisant la méthode reduce sur le tableau items
items.reduce((acc, item) => acc + `
<li data-id="${item.id}"${item.completed ? ' class="completed"' : ''}>
<div class="view">
<input class="toggle" type="checkbox" ${item.completed ? 'checked' : ''}>
<label>${item.title}</label>
<button class="destroy"></button>
</div>
</li>`, '');