data template 다운로드 - data template 소스 코드 다운로드

data template

기타 카테고리

1.0.0

다운로드

데이터 템플릿

기본 DOM으로 구동되는 가볍고 최소한의 HTML 템플릿 도우미

node-data-template을 통해 사용 가능한 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 축소 및 gzipped

지원되는 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 >

더 많은 예는 템플릿/공개를 참조하세요.

기능

렌더링 기능 :

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