JSON JQUERY 템플릿 구현 지침_jquery

하지만 클라이언트 측에서 데이터를 재생산하는 것도 큰 문제인데, 특히 테이블과 같이 동일한 구조를 가진 대규모 데이터의 경우 처리 방법이 만족스럽지 않습니다. 템플릿 컨트롤, 서버 측 asp.net Gridview 또는 리피터와 같은 것이 훨씬 좋습니다. 최근에 사용하기 쉬우면서도 작성자의 절묘한 디자인에 한숨을 쉬게 하는 매우 훌륭한 솔루션을 보았습니다. 수십, 심지어 수백,000개의 js 라이브러리를 사용하여 다른 사람들이 수행할 작업을 수행하는 데 수십 줄의 코드가 필요합니다. 이것은 John Resig의 Microtemplating 엔진입니다. Master Rick Strahl은 이에 대해 자세히 설명하는 기사를 제공합니다( 여기에서는 Jquery를 사용한 클라이언트 템플릿 작성). 중국인의 학습을 촉진하는 핵심 부분.

다음 프로그램은 마이크로템플릿 엔진입니다.

코드를 복사하세요 코드는 다음과 같습니다.

var _tmplCache = {}
this.parseTemplate = function(str, data) {
///

/// <#= # > 및 <# 코드 #>
/// 및 # # 코드 블록
/// 참고: 일부 상황에서는 문서에서 작은따옴표가 막힙니다.
// / 텍스트의 리터럴에는 '를 사용하고 작은따옴표를 사용하지 마세요.
/// 속성 구분 기호는 사용하지 마세요.
///

/// 확장할 템플릿의 텍스트
///
/// 모든 데이터 병합할 객체를 전달하면
/// 해당 객체의 속성이 변수로 표시됩니다.
///
///
var err = "";
try {
var func = _tmplCache[str]
if (!func) {
var strFunc =
"var p=[ ],print=function() {p.push.apply(p,arguments);};"
"with(obj){p.push('"

str.replace(/[rtn ]/g, " ")
.replace(/'(?=[^#]*#>)/g, "t")
.split("'").join("\' ")
.split ("t").join("'")
.replace(/<#=(. ?)#>/g, "',$1,'")
.split("< #").join("');")
.split("#>").join("p.push('")
"');} return p.join('' );";

//alert(strFunc);
func = new Function("obj", strFunc);
_tmplCache[str] = func;
}
return func(data);
} catch (e) { err = e.message; }
return "< # ERROR: " err.htmlEncode() " # >";
}

사용방법:

코드 복사 코드는 다음과 같습니다.

parseTemplate($("# ItemTemplate").html(),{ 이름: "rick", 주소: { 거리: "32 kaiea", 도시: "paia"} } )

위 프로그램에 사용된 템플릿:

코드 복사 코드는 다음과 같습니다.

< ;script id="ItemTemplate" type="text/html"> ;

<#= 이름 #>

<#= 주소.거리 #> ;

루프를 사용하려면:

code 코드는 다음과 같습니다.

$.each(dataarray,function(index,dataItem){

parseTemplate($("#ItemTemplate").html( ), dataItem );
})

아주 간단하고 우아하죠?