Utiliser des templates HTML en JavaScript

À quoi sert le micro-template

Pour construire une interface JavaScript, il faut souvent produire le DOM à partir d’un modèle HTML. Le bureau (Desk) utilise le script Microtemplate de John Resig.

Deux règles de la source :

1. Frappe embarque le code avec des balises de style Jinja, {% et %}, et non avec les balises <% habituelles de ce micro-template.
2. N’utilisez pas de guillemet simple ' à l’intérieur du modèle HTML.

Mise en place

1. Créez un fichier modèle html dans l’application, par exemple address_list.html.
2. Ajoutez-le à build.json. Il peut entrer dans frappe.min.js ou dans votre propre fichier JavaScript.
3. Rendez-le avec frappe.render(frappe.templates.address_list, { context }).

Exemple

Le modèle cité vient de erpnext/public/js/templates/address_list.js. Il affiche un bouton « New Address », puis parcourt addr_list : lien Edit, type d’adresse, badge Primary si is_primary_address, badge Shipping si is_shipping_address, et le champ display. Si addrlist est vide, le texte « No address added yet. » s’affiche.

La boucle publiée mélange addrlist.length et addr_list[i]. Les libellés passent par _() ou __().

Point d’attention

Le fichier doit être dans build.json pour que frappe.templates le connaisse. Un guillemet simple dans le HTML casse le modèle, selon la note de la source.