تنزيل data template - تنزيل كود مصدر data template

data template

فئات أخرى

1.0.0

تنزيل

قالب البيانات

مساعدات قالب HTML خفيفة الوزن وبسيطة مدعومة بـ DOM الأصلي

يتوفر وضع العرض من جانب الخادم (SSR) عبر قالب بيانات العقدة

التثبيت (مع 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 >

البدء (مع مشروع القالب)

بالنسبة للمشروع الجديد الذي لا يحتوي على ملفات موجودة، يمكنك استخدام cli 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
وظائف المساعدة للقيام بأياكس وتنسيق الإدخال (التاريخ/الوقت)
خفيف الوزن، 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 >

مزيد من الأمثلة انظر القالب/عام

وظائف

وظائف التقديم :

 // 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، فسيتم استدعاء رد الاتصال على الفور. ثم سيتم جلب البيانات بغض النظر عن تخزينها مؤقتًا أم لا. إذا كانت البيانات التي تم جلبها حديثًا مختلفة عن البيانات المخزنة مؤقتًا، فسيتم استدعاء رد الاتصال مرة أخرى.