trimpath 전단 템 플 릿 엔진

Trimpath JavaScript 는 경량급 으로 JavaScript 기반 의 크로스 브 라 우 저 로 APL / GPL 오픈 소스 프로 토 콜 을 사용 하여 템 플 릿 프로 그래 밍 방식 의 순수 JS 엔진 을 쉽게 진행 할 수 있 습 니 다.     그것 은 다음 과 같은 특징 이 있다.     1. 표준 자 바스 크 립 트 로 작성, 크로스 브 라 우 저 지원     2. 템 플 릿 문법 은 FreeMarker, Velocity, Smarty 와 유사 하 다.     3. 간단 하고 쉬 운 언어 로 큰 문자열 과 Dom / DHTML 작업 을 설명 합 니 다.      이 엔진 을 사용 하면 View 방면 의 일 을 완전히 처리 할 수 있 고 서버 Module 에서 Data 를 직접 출력 하면 됩 니 다.MVC 모드 를 하나 로 연결 시 키 고 View 를 브 라 우 저 로 처리 하기 때문에 서버 의 부담 을 크게 줄 이 고 Ajax 기술 을 구축 하 는 네트워크 정보 시스템 응용 은 매우 좋 은 선택 입 니 다.다음은 이 사이트 의 글 을 번역 하여 JST 엔진 의 사용 을 소개 합 니 다.

      공식 사이트:
      http://code.google.com/p/trimpath/wiki/JavaScriptTemplates
우선 html 페이지 에 trimpath 의 js 파일 을 불 러 옵 니 다.

<html>
    <head>
	<script language="javascript" src="trimpath-template-1.0.38.js"></script>
    </head>
</html>

다음은 배열 이나 objects 같은 표준 자바 script 데 이 터 를 만 듭 니 다.

	 <script language="javascript">     
	 var data = {         
		products : [ { name: "mac", desc: "computer",price: 1000, quantity: 100, alert:null },
					 { name: "ipod", desc: "music player",price:  200, quantity: 200, alert:"on sale now!" }, 
                     { name: "cinema display", desc: "screen", price:  800, quantity: 300, alert:"best deal!" } ],         
		customer : { first: "John", last: "Public", level: "gold" }     
		};   
	</script>

그 다음 에 저 희 는 JST 템 플 릿 을 만들어 서 위의 데 이 터 를 읽 고 템 플 릿 의 스타일 을 보이 지 않 게 설정 합 니 다.

	     <textarea id="cart_jst" style="display:none;">
			 Hello ${customer.first} ${customer.last}.<br/>     
			 Your shopping cart has ${products.length} item(s):     
			 <table>      
				<tr>
					<td>Name</td><td>Description</td> 
					<td>Price</td><td>Quantity & Alert</td></tr> 
				{for p in products}       
				<tr>
					<td>${p.name|capitalize}</td>
					<td>${p.desc}</td> 
					<td>$${p.price}</td><td>${p.quantity} : ${p.alert|default:""|capitalize}</td>  
				</tr>  
				{forelse}          
				<tr>
					<td colspan="4">No products in your cart.</td>
				</tr>     
				{/for}    
			 </table>    
			 {if customer.level == "gold"}     
			 We love you!  Please check out our Gold Customer specials!   
			 {else}     
			 Become a Gold Customer by buying more stuff here.     
			 {/if}   
		 </textarea>

다음 코드 는 JST 를 사용 하여 템 플 릿 을 처리 하 는 방법 을 보 여 줍 니 다.

		 <script language="javascript">     
			 // The one line processing call...     
			 var result = TrimPath.processDOMTemplate("cart_jst", data);     
			 // Voila!  That's it -- the result variable now holds      
			 // the output of our first rendered JST.      
			 // Alternatively, you may also explicitly parse the template...
			 //var myTemplateObj = TrimPath.parseDOMTemplate("cart_jst");      
			 // Now, calls to myTemplateObj.process() won't have parsing costs...     
			 //var result  = myTemplateObj.process(data);     
			 //var result2 = myTemplateObj.process(differentData);      
			 // Setting an innerHTML with the result is a common last step...     
			 document.getElementById('test').innerHTML = result;     
			 // You might also do a document.write() or something similar...   
		 </script>

페이지 전시 결과:

Hello John Public.
Your shopping cart has 3 item(s):
Name	Description	Price	Quantity & Alert
MAC	computer	$1000	100 :
IPOD	music player	$200	200 : ON SALE NOW!
CINEMA DISPLAY	screen	$800	300 : BEST DEAL!
We love you! Please check out our Gold Customer specials!

첨부 파일 은 위 에서 설명 한 예 입 니 다. 관심 있 는 동 화 를 다운로드 할 수 있 습 니 다 ~ ~ ~

trimpath 전단 템 플 릿 엔진

좋은 웹페이지 즐겨찾기