data template

templat data

Pembantu template HTML yang ringan dan minimal didukung oleh DOM asli

Mode rendering sisi server (SSR) tersedia melalui templat data simpul

Instalasi (dengan CDN)

Letakkan di bawah baris di html Anda dengan pembaruan patch otomatis:

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

Atau tentukan versi persisnya dengan perlindungan integritas:

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

Anda juga dapat menggunakan versi yang diperkecil:

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

Memulai (dengan proyek templat)

Untuk proyek baru tanpa file yang ada, Anda dapat menggunakan cli data-template untuk menyiapkan proyek sederhana dari templat.

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

Fitur

• menerapkan data ke dom berdasarkan atribut kumpulan data ( data-* ).
• ulangi elemen secara otomatis jika nilainya berupa array
• mendukung fragmen dengan templat bersarang
• ambil dan cache template html dan respons api dengan Penyimpanan lokal
• fungsi pembantu untuk melakukan ajax dan format input (tanggal/waktu)
• ringan, 1KB diperkecil dan di-gzip

Atribut data-* yang didukung :

kategori	atribut
umum	teks, kelas, id, judul
link	href
media	src, alternatif
menampilkan	tersembunyi, tunjukkan, jika
masukan	nilai, dicentang, dipilih, dinonaktifkan, hanya baca
dialog	membuka
membentuk	tindakan, kirim
peristiwa	klik

Contoh Singkat dengan CDN

(Untuk tag skrip dengan versi persis dan checksum integritas, lihat bagian di atas)

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

Contoh lebih lanjut lihat template/publik

Fungsi

Fungsi Render :

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

Fungsi Format :

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

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

Untuk fungsi getText() dan getJSON() , options dan argumen cb bersifat opsional.

Objek options adalah argumen kedua yang diteruskan ke fungsi fetch .

Fungsi callback akan dipanggil dengan data yang di-cache dan/atau diambil (detail).

Jika disarankan untuk menyediakan { cache: 'reload' } dalam options atau gunakan fungsi panggilan balik untuk menerima data jika Anda ingin menghindari tampilan terhenti.

Janji yang dikembalikan dapat digunakan untuk melakukan penanganan kesalahan.

Kapan fungsi panggilan balik akan dipanggil

Jika data pengambilan sudah di-cache oleh url, callback akan segera dipanggil. Kemudian data akan diambil tidak peduli di-cache atau tidak. Jika data yang baru diambil berbeda dengan data yang di-cache, callback akan dipanggil lagi.

Ukuran

Format	Ukuran Berkas
base.js	5,3 KB
base.min.js	2,9 KB
base.min.js.gz	1,4 KB

Lisensi

Proyek ini dilisensikan dengan Klausul BSD-2

Ini adalah perangkat lunak gratis, gratis, dan sumber terbuka. Hal ini bermuara pada empat kebebasan esensial [ref]:

• Kebebasan menjalankan program sesuai keinginan, untuk tujuan apa pun
• Kebebasan untuk mempelajari cara kerja program, dan mengubahnya sehingga komputasi Anda berjalan sesuai keinginan
• Kebebasan untuk mendistribusikan ulang salinannya sehingga Anda dapat membantu orang lain
• Kebebasan untuk mendistribusikan salinan versi modifikasi Anda kepada orang lain