data template

Datenvorlage

Leichte und minimale HTML-Vorlagen-Helfer, die auf nativem DOM basieren

Server-Side-Rendering-Modus (SSR), verfügbar über Node-Data-Template

Installation (mit CDN)

Fügen Sie die folgende Zeile in Ihrem HTML-Code mit automatischen Patch-Updates ein:

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

Oder geben Sie die genaue Version mit Integritätsschutz an:

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

Sie können auch die minimierte Version verwenden:

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

Erste Schritte (mit Vorlagenprojekt)

Für ein neues Projekt ohne vorhandene Dateien können Sie die data-template CLI verwenden, um ein einfaches Projekt aus der Vorlage einzurichten.

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

Merkmale

• Wenden Sie Daten basierend auf Datensatzattributen ( data-* ) in dom an
• Elemente automatisch wiederholen, wenn der Wert ein Array ist
• Unterstützen Sie Fragmente mit verschachtelter Vorlage
• HTML-Vorlage und API-Antwort mit localStorage abrufen und zwischenspeichern
• Hilfsfunktionen für Ajax und Eingabeformat (Datum/Uhrzeit)
• leichtgewichtig, 1 KB minimiert und gezippt

Unterstützte data-* Attribute :

Kategorie	Attribute
allgemein	Text, Klasse, ID, Titel
Link	href
Medien	src, alt
Anzeige	versteckt, zeigen, wenn
Eingang	Wert, aktiviert, ausgewählt, deaktiviert, schreibgeschützt
Dialog	offen
bilden	Aktion, onsubmit
Ereignis	onclick

Kurzes Beispiel mit CDN

(Für Skript-Tags mit genauer Version und Integritätsprüfsumme siehe Abschnitt oben)

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

Weitere Beispiele finden Sie unter template/public

Funktionen

Renderfunktionen :

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

Formatfunktionen :

 // 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-Funktionen :

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

Für die Funktionen getText() und getJSON() sind die options und cb -Argumente optional.

Das options ist das zweite Argument, das an die fetch übergeben wird.

Die callback wird mit zwischengespeicherten und/oder abgerufenen Daten (Details) aufgerufen.

Es wird empfohlen { cache: 'reload' } in den options anzugeben oder die Rückruffunktion zum Empfangen der Daten zu verwenden, wenn Sie eine veraltete Ansicht vermeiden möchten.

Das zurückgegebene Versprechen kann zur Fehlerbehandlung verwendet werden.

Wann wird die Callback-Funktion aufgerufen?

Wenn die Abrufdaten bereits per URL zwischengespeichert sind, wird der Rückruf sofort aufgerufen. Dann werden die Daten abgerufen, unabhängig davon, ob sie zwischengespeichert sind oder nicht. Wenn sich die neu abgerufenen Daten von den zwischengespeicherten Daten unterscheiden, wird der Rückruf erneut aufgerufen.

Größe

Format	Dateigröße
base.js	5,3 KB
base.min.js	2,9 KB
base.min.js.gz	1,4 KB

Lizenz

Dieses Projekt ist mit der BSD-2-Klausel lizenziert

Dabei handelt es sich um kostenlose, freie und Open-Source-Software. Es kommt auf vier wesentliche Freiheiten an [ref]:

• Die Freiheit, das Programm nach Ihren Wünschen und für jeden Zweck auszuführen
• Die Freiheit, die Funktionsweise des Programms zu studieren und es so zu ändern, dass es Ihre Berechnungen nach Ihren Wünschen durchführt
• Die Freiheit, Kopien weiterzuverbreiten, damit Sie anderen helfen können
• Die Freiheit, Kopien Ihrer geänderten Versionen an andere weiterzugeben