data template
1.0.0
Assistants de modèles HTML légers et minimaux alimentés par DOM natif
Mode de rendu côté serveur (SSR) disponible via le modèle de données de nœud
Déposez la ligne ci-dessous dans votre code HTML avec les mises à jour automatiques des correctifs :
< script src =" https://cdn.jsdelivr.net/npm/[email protected]/base.js " > </ script > < script
src =" https://cdn.jsdelivr.net/npm/[email protected]/base.js "
crossorigin =" anonymous "
integrity =" sha384-i35RjawhK9lVyGUZOl8bMw50PRHWqwOuSPnMCq69WytKJ5Tqx9FhZ4SRIjQfp6yZ "
> </ script > < script
src =" https://cdn.jsdelivr.net/npm/[email protected]/base.min.js "
crossorigin =" anonymous "
integrity =" sha384-HdiWx6gZdhakPcyhM4tZ1XImMYkFBV5QPz+F+e3J6gJub1djlJk8DbWTd8tub0Ib "
> </ script > Pour un nouveau projet sans fichiers existants, vous pouvez utiliser le cli data-template pour configurer un projet simple à partir d'un modèle.
npx data-template my-app
cd my-app
# then see the guides in the console output and README.md file data-* ) Attributs data-* pris en charge :
| catégorie | attributs |
|---|---|
| général | texte, classe, identifiant, titre |
| lien | href |
| médias | src, alt |
| afficher | caché, montrer, si |
| saisir | valeur, coché, sélectionné, désactivé, lecture seule |
| dialogue | ouvrir |
| formulaire | action, lors de la soumission |
| événement | en cliquant |
(Pour la balise de script avec la version exacte et la somme de contrôle d'intégrité, voir la section ci-dessus)
< script src =" https://cdn.jsdelivr.net/npm/[email protected]/base.js " > </ script >
< header id =" header " data-template =" header.html " > </ header >
< main id =" main " data-template =" article " data-bind =" articles " >
loading articles...
</ main >
< template data-name =" article " >
< article >
< h2 data-text =" title " > </ h2 >
< ul class =" tags " >
< li class =" tag " data-text =" tags " > </ li >
</ ul >
< p data-text =" intro " > </ p >
< a data-href =" detail " data-class =" highlight " > Details </ a >
</ article >
</ template >
< script >
renderTemplate ( header )
getJSON ( '/articles' ) . then ( articles => renderTemplate ( main , { articles } ) )
/* sample data:
[
{
title: '...',
tags: ['a', 'b'],
intro: '...',
detail: '/article.html?id=1',
highlight: false,
},
{
title: '...',
tags: [],
intro: '...',
detail: '/article.html?id=2',
highlight: true,
},
]
*/
</ script >Pour plus d'exemples, voir template/public
Fonctions de rendu :
// render data-* attributes
function renderData ( container , values ) ;
// render template on specific host element
function renderTemplate ( hostElement , binds ) ;
// recursive scan for templates and render them
function scanTemplates ( rootElement , binds ) ;
// populate the form using values from the object
function fillForm ( form , object ) ;Fonctions de formatage :
// prepend '0' of the number is less than ten
function d2 ( number ) ;
// convert to 'YYYY-MM-DD' format for input[type=date]
function toInputDate ( date_or_time_or_string ) ;
// convert to 'HH:mm' format for input[type=time]
function toInputTime ( date_or_time_or_string ) ;Fonctions AJAX :
// return promise of string, cached with localStorage
function getText ( url , options , callback ) ;
// return promise of json value, cached with localStorage
function getJSON ( url , options , callback ) ;
// submit form with ajax request in application/json
function submitJSON ( event_or_form ) : Promise < Response >
// submit form with ajax request in application/x-www-form-urlencoded or url search parameters
function submitForm(event_or_form): Promise < Response >
// submit form with ajax request in multipart/form-data
function uploadForm(event_or_form): Promise < Response >
// send ajax request in application/json
function postJSON(url, body): Promise < Response >
function patchJSON(url, body): Promise < Response >
function putJSON(url, body): Promise < Response >
// send ajax request with DELETE method
function del(url): Promise < Response > Pour les fonctions getText() et getJSON() , les options et les arguments cb sont facultatifs.
L'objet options est le deuxième argument passé à la fonction fetch .
La fonction callback sera appelée avec les données mises en cache et/ou récupérées (détails).
Il est recommandé de fournir { cache: 'reload' } dans les options ou d'utiliser la fonction de rappel pour recevoir les données si vous souhaitez éviter une vue obsolète.
La promesse renvoyée peut être utilisée pour gérer les erreurs.
Si les données de récupération sont déjà mises en cache par URL, le rappel sera appelé immédiatement. Ensuite, les données seront récupérées, qu'elles soient mises en cache ou non. Si les données nouvellement récupérées sont différentes des données mises en cache, le rappel sera à nouveau appelé.
| Format | Taille du fichier |
|---|---|
| base.js | 5,3 Ko |
| base.min.js | 2,9 Ko |
| base.min.js.gz | 1,4 Ko |
Ce projet est sous licence BSD-2-Clause
Il s'agit d'un logiciel gratuit, libre et open source. Cela se résume à quatre libertés essentielles [ref] :
