data template

шаблон данных

Легкие и минималистичные помощники по шаблонам HTML, работающие на основе встроенного DOM.

Режим рендеринга на стороне сервера (SSR) доступен через node-data-template.

Установка (с CDN)

Опустите строку ниже в свой html с автоматическим обновлением патчей:

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

Начало работы (с шаблоном проекта)

Для нового проекта без существующих файлов вы можете использовать интерфейс data-template чтобы настроить простой проект из шаблона.

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

Функции

• применять данные в dom на основе атрибутов набора данных ( data-* )
• элементы автоповтора, если значение является массивом
• поддержка фрагментов с вложенным шаблоном
• получить и кэшировать HTML-шаблон и ответ API с помощью localStorage
• вспомогательные функции для выполнения ajax и формата ввода (дата/время)
• легкий, 1 КБ минимизирован и сжат gzip

Поддерживаемые атрибуты data-* :

категория	атрибуты
общий	текст, класс, идентификатор, заголовок
связь	href
СМИ	источник, альтернативный
отображать	скрыто, показать, если
вход	значение, проверено, выбрано, отключено, только для чтения
диалог	открыть
форма	действие, при отправке
событие	по клику

Быстрый пример с CDN

(Тег сценария с точной версией и контрольной суммой целостности см. в разделе выше)

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

Дополнительные примеры см. в шаблоне/public.

Функции

Функции рендеринга :

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

Функции формата :

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

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 >

Для функций getText() и getJSON() options и аргументы cb являются необязательными.

Объект options — это второй аргумент, передаваемый функции fetch .

Функция callback будет вызвана с кэшированными и/или полученными данными (подробностями).

Рекомендуется указать { cache: 'reload' } в options или использовать функцию обратного вызова для получения данных, если вы хотите избежать устаревшего представления.

Возвращенное обещание можно использовать для обработки ошибок.

Когда будет вызвана функция обратного вызова

Если данные выборки уже кэшированы по URL-адресу, обратный вызов будет вызван немедленно. Тогда данные будут извлечены независимо от того, кэшированы они или нет. Если вновь полученные данные отличаются от кэшированных данных, обратный вызов будет вызван снова.

Размер

Формат	Размер файла
база.js	5,3 КБ
base.min.js	2,9 КБ
base.min.js.gz	1,4 КБ

Лицензия

Этот проект имеет лицензию BSD-2-Clause.

Это бесплатное программное обеспечение с открытым исходным кодом. Это сводится к четырем основным свободам [ссылка]:

• Свобода запускать программу по своему желанию и для любых целей.
• Свобода изучать, как работает программа, и изменять ее так, чтобы она выполняла ваши вычисления по вашему желанию.
• Свобода распространять копии, чтобы вы могли помочь другим.
• Свобода распространять копии ваших модифицированных версий среди других.