경량 템플릿 엔진에 Juicer를 사용하는 안내서

사용 방법

템플릿을 컴파일하고 데이터를 기반으로 즉시 결과를 렌더링합니다.

 Juicer (TPL, 데이터);

템플릿 만 컴파일하고 아직 렌더링하지 않으면 재사용 가능한 컴파일 기능을 반환하십시오.

 var compiled_tpl = Juicer (tpl);

주어진 데이터를 기반으로 이전에 컴파일 된 템플릿 렌더링

 var compiled_tpl = Juicer (tpl); var html = compiled_tpl.render (데이터);

등록/로그인 사용자 정의 기능 (개체)

 juicer.register ( 'function_name', function); juicer.unregister ( 'function_name');

기본 매개 변수 구성

 {캐시 : true [false]; 스크립트 : true [false]; 오류 처리 : true [false]; 탐지 : true [false]; }

기본 구성을 수정하고 하나씩 수정하십시오

 juicer.set ( 'cache', false);

기본 구성, 배치 수정을 수정하십시오

 juicer.set ({ 'script': false, 'cache': false})

Juicer는 기본적으로 컴파일 된 템플릿을 캐시하여 데이터가 여러 번 렌더링 될 때 동일한 템플릿을 반복적으로 컴파일하는 데 소요되는 시간을 피할 수 있습니다. 특별한 요구가없는 경우 기본 매개 변수에서 캐시를 끄는 것이 좋습니다. 이렇게하면 Juicer 캐시가 무효화되고 성능이 줄어 듭니다.

문법

* $ {변수}

- $ {} 출력 변수를 사용하십시오. 여기서 _는 데이터 소스 ($ {_})에 대한 참조입니다. 사용자 정의 기능 사용을 지원합니다.

 $ {name} $ {name | function} $ {name | function, arg1, arg2}

 var = links : [href : 'http://juicer.name', alt : 'juicer'}, {href : 'http://benben.cc', alt : 'benben'}, {href : 'http://ude.taobao.com', alt : 'taobao ued'}); var tpl = [ '{@each links as at at at}', '$ {item | links_build} <br />', '{@ /eg}']. join ( ''); var int // Register Custom Function Juicer (TPL, JSON);

* 탈출/탈출을 피하십시오

- $ {variable}은 출력 전에 내용을 탈출하며 출력을 탈출하지 않으려면 $$ {variable}을 사용하여 피할 수 있습니다.

 var json = {value : '<strong> Juicer </strong>'}; var Escape_tpl = '$ {value}'; var unescape_tpl = '$$ {value}'; Juicer (Escape_tpl, JSON); // 출력 '<strong> Juicer </strong>'Juicer (unescape_tpl, json); // 출력 '<strong> Juicer </strong>'

*{@each} ... {@/각}를 통과합니다.

- 배열을 반복, $ {index} current Index

 {@each list as at at at at at it, index} $ {item.prop} $ {index} // current Index {@/earge}

*판사 {@if} ... {@else if} ... {@else} ... {@/if}

*댓글 {# 댓글 내용}

{# 여기 댓글 내용}}

*보조 루프 {@each I in range (m, n)}

 {@each I in Range (5, 10)} $ {i}; // 출력 5; 6; 7; 8; 9; {@/각}

*하위 테템 플레이트 중첩 {@include tpl, data}

-서브 테드 플레이트 중첩 데이터에 지정된 서브 테드 플레이트를 소개하는 것 외에도`스크립트 '태그에 작성된 서브 테드 플레이트 코드는 문자열`#id`를 지정하여 사용할 수 있습니다.

-HTML 코드 :

 <script type = "text/juicer"id = "subtpl"> 나는 하위 내용, $ {name} </script>입니다

- 자바 스크립트 코드 :

 var tpl = 'hi, {@include "#subtpl", subdata}, end.'; juicer (tpl, {subdata : {name : 'juicer'}}); // hi, 하위 내용, Juicer, End. // 또는 데이터를 통해 서브 테드 플레이트를 소개하면 다음 코드도 동일한 렌더링 결과를 갖습니다. var tpl = 'hi, {@include subtpl, subdata}, end.'; Juicer (tpl, {subtpl : "나는 sub content, $ {name}", subdata : {name : 'Juicer'}});

완전한 예

HTML 코드 :

 <script id = "tpl"type = "text/template"> ul> {@each list as as as as} <li> $ {it.name} (index : $ {index}) </li> {@/eg} {@each blah as as as as as as as as at at} <li> num : $ {it.num} <br/> {@if at at at at at at at at at at at. it2} $ {it2.time} <br/> {@/earg} {@/if} </li> {@/eg} </ul> </script>

자바 스크립트 코드 :

 var data = {list : [{name : 'guokai', show : true}, {name : 'benben', show : show : false}, {이름 : 'dierbaby', show : true}], blah : [{num : 1}, {num : 2}, {num : 3, inner : [ 'time': '15 : 00 '}, {' '}, '16 : 00 '}, {'time ': '17 : 00'}, { 'time': '18 : 00 '}}, {num : 4}]}; var tpl = document.getElementById ( 'tpl'). innerHtml; var html = Juicer (tpl, data);