data template下載 - data template原始碼下載

data template

其他類別

1.0.0

下載

資料模板

由本機 DOM 提供支援的輕量級且最小化的 HTML 模板助手

透過節點資料模板提供伺服器端渲染 (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 >

開始使用（使用範本項目）

對於沒有現有文件的新項目，您可以使用data-template cli 從模板設定一個簡單的項目。

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

特徵

根據資料集 ( data-* ) 屬性將資料套用到 dom 中
如果值為數組，則自動重複元素
支援帶有嵌套模板的片段
使用 localStorage 取得並快取 html 範本和 api 回應
用於執行 ajax 和輸入格式（日期/時間）的輔助函數
輕量級、1KB 壓縮和 gzip 壓縮

支援的data-*屬性：

類別	屬性
一般的	文字、類別、id、標題
關聯	連結地址
媒體	原始碼、替代程式碼
展示	隱藏、顯示、如果
輸入	值、選取、選定、停用、唯讀
對話	打開
形式	行動，提交
事件	點擊時

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 >

更多範例請參閱 template/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 >