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、タイトル
リンク	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 >

その他の例については、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 >