data template

modelo de dados

Ajudantes de modelo HTML leves e mínimos desenvolvidos com DOM nativo

Modo de renderização do lado do servidor (SSR) disponível via node-data-template

Instalação (com CDN)

Coloque abaixo a linha em seu html com atualizações automáticas de patch:

 < script src =" https://cdn.jsdelivr.net/npm/[email protected]/base.js " > </ script >

Ou especifique a versão exata com proteção de integridade:

 < script
  src =" https://cdn.jsdelivr.net/npm/[email protected]/base.js "
  crossorigin =" anonymous "
  integrity =" sha384-i35RjawhK9lVyGUZOl8bMw50PRHWqwOuSPnMCq69WytKJ5Tqx9FhZ4SRIjQfp6yZ "
> </ script >

Você também pode usar a versão reduzida:

 < script
  src =" https://cdn.jsdelivr.net/npm/[email protected]/base.min.js "
  crossorigin =" anonymous "
  integrity =" sha384-HdiWx6gZdhakPcyhM4tZ1XImMYkFBV5QPz+F+e3J6gJub1djlJk8DbWTd8tub0Ib "
> </ script > 

Primeiros passos (com projeto modelo)

Para um novo projeto sem arquivos existentes, você pode usar o data-template cli para configurar um projeto simples a partir do modelo.

npx data-template my-app
cd my-app
# then see the guides in the console output and README.md file 

Características

• aplicar dados no dom com base nos atributos do conjunto de dados ( data-* )
• elementos de repetição automática se o valor for uma matriz
• suporta fragmentos com modelo aninhado
• buscar e armazenar em cache o modelo HTML e a resposta da API com localStorage
• funções auxiliares para fazer ajax e formato de entrada (data/hora)
• leve, 1 KB reduzido e compactado

Atributos data-* suportados :

categoria	atributos
em geral	texto, classe, id, título
link	href
mídia	src, alt
mostrar	escondido, mostrar, se
entrada	valor, verificado, selecionado, desabilitado, somente leitura
diálogo	abrir
forma	ação, ao enviar
evento	ao clicar

Exemplo rápido com CDN

(Para tag de script com versão exata e soma de verificação de integridade, consulte a seção acima)

 < 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 >

Mais exemplos veja template/public

Funções

Funções de renderização :

 // 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 ) ;

Funções 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 ) ;

Funções 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 as funções getText() e getJSON() , as options e os argumentos cb são opcionais.

O objeto options é o segundo argumento passado para a função fetch .

A função callback será chamada com dados armazenados em cache e/ou buscados (detalhes).

É recomendado fornecer { cache: 'reload' } nas options ou usar a função de retorno de chamada para receber os dados se quiser evitar a visualização obsoleta.

A promessa retornada pode ser usada para tratar erros.

Quando a função de retorno de chamada será chamada

Se os dados de busca já estiverem armazenados em cache por URL, o retorno de chamada será chamado imediatamente. Em seguida, os dados serão buscados, independentemente de estarem armazenados em cache ou não. Se os dados recém-buscados forem diferentes dos dados armazenados em cache, o retorno de chamada será chamado novamente.

Tamanho

Formatar	Tamanho do arquivo
base.js	5,3 KB
base.min.js	2,9 KB
base.min.js.gz	1,4 KB

Licença

Este projeto está licenciado com BSD-2-Clause

Este é um software gratuito, gratuito e de código aberto. Tudo se resume a quatro liberdades essenciais [ref]:

• A liberdade de executar o programa como desejar, para qualquer finalidade
• A liberdade de estudar como o programa funciona e alterá-lo para que ele faça sua computação como você deseja
• A liberdade de redistribuir cópias para que você possa ajudar outras pessoas
• A liberdade de distribuir cópias de suas versões modificadas para terceiros