프런트 엔드 템플릿 엔진 doT.js 사용

간략한 소개

프런트 엔드 템플릿 엔진을 사용하기 쉬운

용법

<스크립트 유형 = " 텍스트 / 자바 스크립트 " SRC = " JS / doT.min.js " > </ script>

! = 및 사용 다릅니다

<! -用户信息-> 
<div 클래스 = " ibBox yhxx " ID = " 사용자 정보 " > 
　　<스크립트 ID = " userTemplate " 유형 = " 텍스트 / X-점 템플릿 " > 
   　　<DIV 클래스 = " ibTitle " >用户信息</ DIV> 
      <DL> 
         <DD> 
            <레이블> <EM>姓名: </ 안에> <SPAN> {! {it.name}} </ SPAN> </ 라벨> 
            <레이블> <EM>工号</ 안에> <SPAN> = {{it.number}} </ SPAN> </ 라벨>
         　　<레이블> <EM>机构: </ EM> <SPAN> {! {it.organName}} </ SPAN> </ 라벨> 
      　　</ DD>  
   　　</ DL>
　　</ script> 
</ DIV> 
<script> var에 데이터 = { " 이름 " : " 홍길동 " , " 번호 " : 1001 , " organName " : "" }, // 렌더링 할 데이터 VAR userTemplate = doT.template ($ ( " #userTemplate " )는 .text ()); // 템플릿 생성 
    $ ( " #userInfo " ) .html 중에서 (userTemplate (데이터)); // 데이터 렌더링 
</ script>
    
    

모두가 할당되며, 다른! 데이터 값 0, 그리고 = 네,하지만! 코드화 된 데이터가 같은 렌더링 할 수있는 렌더링되지 않음

var에 데이터 = { " URL " : " http://jq22.com/?keywords=Yoga " , " HTML " : " <DIV 스타일 = '배경 : #의 F00, 높이 : 30 픽셀, 라인 - 높이 : 30 픽셀;'> HTML元素</ div> " };

- 사용

{{~ it.list : 항목 : 인덱스}}
 <TR 데이터-ID " {{item.id}!} " > 
    <TD> {{item.title}!} </ TD> 
    <TD> {{! item.publishTime}} </ TD> 
</ TR> 
{{ ~}}

배열을 통한 루프

? 사용

<스팬 클래스 = " {{?}}. 1 it.type W1 == {{2}} ??의 W2 it.type == {{{{} W3?}?}} " > 
　　{{ ? it.status == 0 } {{}}} 미발표 ?? 문서 {{? }}
 </ SPAN>

분석 조건의 경우 해당 .... 다른 경우 ......

# 사용법

<DIV 클래스 = " ibBox yhxx " ID = " 사용자 정보 " > 
　　<스크립트 ID = " userTemplate " 유형 = " 텍스트 / X-점 템플릿 " > 
　　　　<! -定义模板tem1 -> 
　　　　{{## def.tem1 :
　　　　　　 <레이블> <EM>姓名: </ EM> <SPAN> {! {it.name}} </ SPAN> </ 라벨> 
　　　　#}}
   　　 <DIV 클래스 = " ibTitle " >用户信息</ DIV> 
      < DL> 
         <DD> 
　　　　　　　　<! -引用模板tem1 -> 
            {{# def.tem1}}
             <라벨> <EM> 工 号 </ EM> <SPAN> = {{it.number}} </ SPAN> </ 라벨>tem1}} 
         　　<레이블> <EM>机构: </ EM> <SPAN> {{it.organName}} </ SPAN> </ 라벨>
      　　</ DD> 
   　　</ DL> 
　　</ script> 
</ DIV>

형식 : 템플릿 이름 템플릿 이름에 대한 이름, ***** 템플릿 내용 참조 템플릿 {{#의 def.name}} 이름 : 템플릿을 {****** #} {## def.name} 정의

기본 루프 사용

{{ 대 ( VAR I = 0 ; i가 it.length를 <; 내가 ++ ) {}} 
　　{{ 경우 (이것은 [I] .BZ == 1 ) {}} 
    　 {{# def.tem1}} 
   {{} 다른 { }} 
   　　{{#의 def.tem2}} 
　　{{}}} 
{{}}}