ArtTemplate 의 간단 한 소개
8647 단어 artTemplate
include 문 구 는 브 라 우 저 에서 경로 에 따라 템 플 릿 을 불 러 올 수 있 습 니 다 템 플 릿 작성
템 플 릿 을 저장 하기 위해
type="text/html" 탭 을 사용 하 십시오:<script id="test" type="text/html">
<h1>{{title}}</h1>
<ul>
{{each list as value i}}
<li> {{i + 1}} ：{{value}}</li>
{{/each}}
</ul>
</script>
렌 더 링 템 플 릿
var data = {
title: ' ',
list: [' ', ' ', ' ', ' ', ' ', ' ', ' ']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
시범 을 보이다
템 플 릿 문법
두 가지 버 전의 템 플 릿 문법 을 선택 할 수 있 습 니 다.
간결 문법
추천 사용, 문법 은 간단 하고 실 용적 이 며 읽 기와 쓰기 에 유리 합 니 다.
{{if admin}}
{{include 'admin_content'}}
{{each list}}
<div>{{$index}}. {{$value.user}}</div>
{{/each}}
{{/if}}
문법 과 프레젠테이션 보기
원생 문법
<%if (admin){%>
<%include('admin_content')%>
<%for (var i=0;i<list.length;i++) {%>
<div><%=i%>. <%=list[i].user%></div>
<%}%>
<%}%>
문법 과 프레젠테이션 보기
다운로드 하 다.
template(id, data)
id 렌 더 링 템 플 릿 에 따라.내 부 는
script 에 따라 템 플 릿 을 찾 습 니 다.data 인자 가 없 으 면 렌 더 링 함 수 를 되 돌려 줍 니 다.
template.
document.getElementById(id) (source, options) 렌 더 링 함 수 를 되 돌려 줍 니 다.시범 을 보이다
template.
compile (source, options) 렌 더 링 결 과 를 되 돌려 줍 니 다.
template.
render (name, callback) 보조 방법 을 첨가 하 다.
예 를 들 어 시간 형식 기: 프레젠테이션
template.
helper (name, value) 엔진 의 기본 설정 을 변경 합 니 다.
필드
유형
기본 값
설명 하 다.
openTag
String
config 논리 문법 시작 탭
closeTag
String
'{{' 논리 문법 끝 탭
escape
Boolean
"}}" 출력 HTML 문자 인 코딩 할 지 여부
cache
Boolean
true 캐 시 를 열 지 여부 (options 에 의존 하 는 filename 필드)
compress
Boolean
true HTML 여분의 공백 문 자 를 압축 할 지 여부
사전 컴 파일 사용
브 라 우 저 제한 을 돌파 하여 전단 템 플 릿 이 백 엔 드 템 플 릿 과 같은 동기 화 '파일' 로 딩 능력 을 가지 도록 합 니 다.
1. 파일 과 디 렉 터 리 에 따라 템 플 릿 을 구성 합 니 다.
template('tpl/home/main', data)
2. 템 플 릿 지원 도입 서브 템 플 릿
{{include '../public/header'}}
사전 컴 파일 기반:
NodeJS
설치 하 다.
npm install art-template -g
쓰다
var template = require('art-template');
var data = {list: ["aui", "test"]};
var html = template(__dirname + '/index/main', data);
배치 하 다.
NodeJS 버 전 은 다음 과 같은 기본 설정 을 추 가 했 습 니 다.
필드
유형
기본 값
설명 하 다.
path
String
false 템 플 릿 디 렉 터 리 지정
extname
String
'' 템 플 릿 접미사 이름 지정
encoding
String
'.html' 지정 템 플 릿 인 코딩
설정
'utf-8' 지정 한 템 플 릿 디 렉 터 리 는 템 플 릿 의 경 로 를 단축 시 킬 수 있 고 path 문 구 는 임의의 경로 에 접근 하여 안전 위험 을 초래 하 는 것 을 피 할 수 있 습 니 다. 예 를 들 어:template.config('path', __dirname);
var html = template('index/main', data)확장:
웹 템 플 릿 엔진 - Mustache
웹 템 플 릿 엔진 은 사용자 인터페이스 와 업무 데이터 (내용) 를 분리 하기 위해 만들어 진 것 으로 특정한 형식의 문 서 를 생 성 할 수 있 으 며 보통 표준 HTML 문서 입 니 다.물론 서로 다른 개발 언어 는 서로 다른 템 플 릿 엔진 이 있 습 니 다. 예 를 들 어 Javascript 의 Hogan, ASP 의 aspTemplate, 그리고 PHP 의 Smarty 등 이 있 습 니 다. 여 기 는 주로 Javascript 언어 를 바탕 으로 하 는 템 플 릿 엔진 을 소개 합 니 다. 현재 Mustache, Hogan, doT. js, JSRender, Kendo UI Templates 등 이 유행 하고 있 습 니 다. jsperf. com 위 에서 그들의 성능 대 비 를 볼 수 있 으 니 먼저 소개 하 겠 습 니 다. Mustache。
1. Mustache 소개:
Mustache 는 logic - less (경 논리) 템 플 릿 분석 엔진 으로 자바 script, PHP, Python, Perl 등 다양한 프로 그래 밍 언어 에 사용 할 수 있다 는 장점 이 있다.
2. Mustache 문법:
Mustache 의 템 플 릿 문법 은 매우 간단 합 니 다. 그 몇 가지 만 있 습 니 다.
{{keyName}}
{{#keyName}} {{/keyName}}
{{^keyName}} {{/keyName}}
{{.}}
{{
{{{keyName}}}
{{!comments}}
자 바스 크 립 트 애플 리 케 이 션 을 예 로 들 어 소개 합 니 다. 데모 부터 보 겠 습 니 다.
...
<script type="text/javascript" src="mustache.js"></script>
<script type="text/javascript">
var data = {
"company": "Apple",
"address": {
"street": "1 Infinite Loop Cupertino</br>",
"city": "California ",
"state": "CA ",
"zip": "95014 "
},
"product": ["Macbook ","iPhone ","iPod ","iPad "]
}
var tpl = '<h1>Hello {{company}}</h1>';
var html = Mustache.render(tpl, data);
console.log( html )
</script>
...
// Console ：
<h1>Hello Apple</h1>
데모 에서 data 는 데이터 이 고 tpl 은 정 의 된 템 플 릿 입 니 다.
include 방법 은 출력 최종 HTML 코드 를 렌 더 링 하 는 데 사 용 됩 니 다.Demo 를 통 해 문법 에 대해 간단 한 소 개 를 합 니 다.
{{keyName}}
Mustache.render(tpl, data) 바로 Mustache 의 표시 자 입 니 다. 괄호 안에 있 는 keyName 은 키 이름 을 표시 합 니 다. 이 문장의 역할 은 키 이름과 일치 하 는 키 값 을 직접 출력 하 는 것 입 니 다. 예 를 들 어:var tpl = '{{company}}';
var html = Mustache.render(tpl, data);
// ：
Apple{{#keyName}} {{/keyName}}
{{}} 로 시작 하여 # 로 블록 을 표시 합 니 다. 현재 컨 텍스트 의 키 값 에 따라 블록 을 한 번 또는 여러 번 렌 더 링 합 니 다. 예 를 들 어 Demo 의 tpl 을 바 꿉 니 다.var tpl = '{{#address}} <p>{{street}},{{city}},{{state}}</p> {{/address}}';
var html = Mustache.render(tpl, data);
// ：
<p>1 Infinite Loop Cupertino</br>,California,CA</p>
메모:
/ 의 key Name 값 이 null, undefined, false 이면;출력 내용 을 과장 하지 않 습 니 다.{{^keyName}} {{/keyName}}
이 문법 은
{{#keyName}} {{/keyName}} 과 유사 합 니 다. 키 Name 값 이 null, undefined, false 일 때 만 이 블록 내용 을 렌 더 링 합 니 다.var tpl = {{^nothing}} nothing {{/nothing}};
var html = Mustache.render(tpl, data);
// ：
nothing {{.}}
{{#keyName}} {{/keyName}} 매 거 진 것 을 표시 하고 전체 배열 을 순환 적 으로 출력 할 수 있 습 니 다. 예 를 들 어:var tpl = '{{#product}} <p>{{.}}</p> {{/product}}';
var html = Mustache.render(tpl, data);
// ：
<p>Macbook </p> <p>iPhone </p> <p>iPod </p> <p>iPad </p>{{>partials}}
{{> address} 과 같은 하위 모듈 을
{{.}} 로 표시 합 니 다.구조 가 비교적 복잡 할 때 우 리 는 이 문법 을 사용 하여 복잡 한 구 조 를 몇 개의 작은 서브 모듈 로 나 눌 수 있다. 예 를 들 어:var tpl = "<h1>{{company}}</h1> <ul>{{>address}}</ul>"
var partials = {address: "{{#address}}<li>{{street}}</li><li>{{city}}</li><li>{{state}}</li><li>{{zip}}</li>{{/address}}"}
var html = Mustache.render(tpl, data, partials);
// ：
<h1>Apple</h1>
<ul><li>1 Infinite Loop Cupertino</br></li><li>California</li><li>CA</li><li>95014</li></ul>{{{keyName}}}
> 출력 은 등 특수 문 자 를 번역 합 니 다. 내용 을 그대로 출력 하려 면 사용 할 수 있 습 니 다 {{keyName}}. 예 를 들 어:var tpl = '{{#address}} <p>{{{street}}}</p> {{/address}}'
// ：
<p>1 Infinite Loop Cupertino</br></p>{{!comments}}
{{{}}} 주석 을 표시 하고 주석 후 출력 내용 을 과장 하지 않 습 니 다.{{! }}
// ：좋은 웹페이지 즐겨찾기
