자바스크립트 템플릿 엔진 아트 템플릿의 일반적인 작업 소개

이 글은 JavaScript 템플릿 엔진 아트 템플릿의 일반적인 작업을 소개합니다. 필요한 친구들이 참고할 수 있기를 바랍니다. 당신에게 도움이 되었습니다.

art-template
javascript 템플릿 엔진, 공식 웹사이트: https://github.com/aui/art- 템플릿

은 기본 구문과 간결 구문으로 구분됩니다. 이 글에서는 주로 간결 구문에 대해 설명합니다

기본 데이터 렌더링
출력 HTML
프로세스 제어#🎜 🎜#Traversal
커스텀 함수 메소드 호출
하위 템플릿 소개
기본 데이터 렌더링
1 art-template.js 파일 소개

<script src="template-debug.js"></script>

2. template

<script id="test" type="text/html">
    <h1>{{title}}</h1>
</script>

3. 템플릿에 데이터를 삽입하고 페이지에 출력합니다

var data = {
    title:"hello world"
};
var html = template("test",data);
document.getElementById('content').innerHTML = html;

Output HTML

<script id="test" type="text/html">
    <h1>{{title}}</h1>
</script>

//참고: {{title }}이것은 내용을 인코딩하기 위한 것으로, 인코딩하지 않고 내용을 출력하기 위한 것입니다. #Call 예제를 직접 살펴보겠습니다. 사용자 정의 메서드

template.helper(name,fnCallBack)를 통해 메서드 등록

{{}}에서 직접 호출 가능

<script id="test" type="text/html">
    <h1>{{#title}}</h1>
</script>

var data = {
    title:"<p>hello world</p>"
};
var html = template("test",data);
document.getElementById(&#39;content&#39;).innerHTML = html;

하위 템플릿 호출

# 🎜🎜 #{{include 'main'}} 하위 템플릿을 도입하면 기본적으로 데이터가 공유됩니다.

{{include 'main' a}} a는 데이터를 지정하는 것이지만 상위 데이터여야 합니다. 다음을 보세요. 예를 들어, a가 주입되지 않으면 도입된 하위 템플릿은 데이터를 수신할 수 없습니다

{{if value}}
...
{{else if value}}
...
{{else}}
...
{{/if}}

위 내용은 자바스크립트 템플릿 엔진 아트 템플릿의 일반적인 작업 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!