data template
1.0.0
ตัวช่วยเทมเพลต HTML น้ำหนักเบาและน้อยที่สุดขับเคลื่อนโดย DOM ดั้งเดิม
โหมดการแสดงผลฝั่งเซิร์ฟเวอร์ (SSR) พร้อมใช้งานผ่านเทมเพลตข้อมูลโหนด
วางบรรทัดด้านล่างใน 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 cli เพื่อตั้งค่าโปรเจ็กต์อย่างง่ายจากเทมเพลต
npx data-template my-app
cd my-app
# then see the guides in the console output and README.md file data-* ) data-* คุณลักษณะ :
| หมวดหมู่ | คุณลักษณะ |
|---|---|
| ทั่วไป | ข้อความ คลาส รหัส ชื่อเรื่อง |
| ลิงค์ | href |
| สื่อ | src ทางเลือก |
| แสดง | ซ่อนไว้ แสดง ถ้า |
| ป้อนข้อมูล | ค่า, ตรวจสอบ, เลือก, ปิดใช้งาน, อ่านอย่างเดียว |
| กล่องโต้ตอบ | เปิด |
| รูปร่าง | การดำเนินการเมื่อส่ง |
| เหตุการณ์ | เมื่อคลิก |
(สำหรับแท็กสคริปต์ที่มีเวอร์ชันและการตรวจสอบความสมบูรณ์ที่แน่นอน โปรดดูส่วนด้านบน)
< 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 >ตัวอย่างเพิ่มเติมดูเทมเพลต/สาธารณะ
ฟังก์ชั่นการเรนเดอร์ :
// 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 ) ;ฟังก์ชั่นอาแจ็กซ์ :
// 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
นี่เป็นซอฟต์แวร์ฟรี เสรี และโอเพ่นซอร์ส เสรีภาพที่สำคัญมีสี่ประการ [อ้างอิง]:
