data template
1.0.0
Ayudantes de plantillas HTML ligeras y mínimas impulsadas por DOM nativo
Modo de representación del lado del servidor (SSR) disponible a través de la plantilla de datos del nodo
Coloque la siguiente línea en su html con actualizaciones automáticas de parches:
< 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 > Para un proyecto nuevo sin archivos existentes, puede usar la CLI data-template para configurar un proyecto simple a partir de una plantilla.
npx data-template my-app
cd my-app
# then see the guides in the console output and README.md file data-* ) Atributos data-* admitidos :
| categoría | atributos |
|---|---|
| general | texto, clase, identificación, título |
| enlace | href |
| medios de comunicación | src, alt |
| mostrar | oculto, mostrar, si |
| aporte | valor, marcado, seleccionado, deshabilitado, solo lectura |
| diálogo | abierto |
| forma | acción, al enviar |
| evento | al hacer clic |
(Para ver la etiqueta de secuencia de comandos con la versión exacta y la suma de verificación de integridad, consulte la sección anterior)
< 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 >Más ejemplos ver plantilla/público
Funciones de renderizado :
// 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 ) ;Funciones de formato :
// 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 ) ;Funciones 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 > Para las funciones getText() y getJSON() , las options y los argumentos cb son opcionales.
El objeto options es el segundo argumento pasado a la función fetch .
La función callback se llamará con datos almacenados en caché y/o recuperados (detalles).
Se recomienda proporcionar { cache: 'reload' } en las options o usar la función de devolución de llamada para recibir los datos si desea evitar la vista obsoleta.
La promesa devuelta se puede utilizar para gestionar errores.
Si los datos recuperados ya están almacenados en caché por URL, la devolución de llamada se llamará inmediatamente. Luego, los datos se recuperarán sin importar si están almacenados en caché o no. Si los datos recién obtenidos son diferentes de los datos almacenados en caché, se volverá a llamar a la devolución de llamada.
| Formato | Tamaño de archivo |
|---|---|
| base.js | 5,3KB |
| base.min.js | 2,9 KB |
| base.min.js.gz | 1,4 KB |
Este proyecto tiene licencia con cláusula BSD-2.
Este es un software gratuito, libre y de código abierto. Todo se reduce a cuatro libertades esenciales [ref]:
