>웹 프론트엔드 >JS 튜토리얼 >jQuery .tmpl() 사용 예 Introduction_jquery

jQuery .tmpl() 사용 예 Introduction_jquery

WBOY
WBOY원래의
2016-05-16 16:38:581247검색

페이지 업데이트를 위한 동적 데이터 요청은 블로그 댓글의 페이징 동적 로드, Weibo의 롤링 로드 및 예약된 요청 로드 등과 같은 요즘 매우 일반적인 방법입니다.

이 경우 동적 요청에 의해 반환되는 데이터는 일반적으로 HTML, JSON 또는 XML로 구성됩니다. 즉, 데이터는 브라우저 측에서 구성되지 않고 서버 측에서 구성됩니다. 그러나 HTML을 반환하는 것은 전송량 측면에서 비용 효율적이지 않으며, 웹 전송 측면에서는 이제 XML보다 JSON이 더 많이 사용됩니다.

브라우저 측에서 JSON을 기반으로 HTML을 생성할 때 매우 귀찮은 부분은 구조가 복잡하지 않으면 괜찮지만 일단 구조가 복잡해지면 정말 악몽이 된다는 점입니다. 유지 관리가 거의 불가능한 코드입니다.

PHP에서 데이터 맞춤법 문제를 해결하는 데 Smarty 템플릿이 사용되는 것처럼 JavaScript도 템플릿을 사용하여 이러한 문제를 해결할 수 있습니다. 예를 들어 jQuery 기반 jquery.tmpl은 이제 공식 템플릿 플러그인으로 승인되었습니다. 자세한 API는 jQuery의 템플릿에 있으며 내장된 데모에서도 다양한 사용법을 보여줍니다.

직접 여러 용도로 사용해보니 JavaScript 대신 더 직관적인 HTML 작성 방법을 사용하여 구조를 작성한 다음 JSON 변수를 사용하여 데이터를 채우는 것이 훨씬 좋아 보입니다.

Tmpl은 여러 태그를 제공합니다:

${}: {{=}}와 동일하며 출력 변수이며 HTML 인코딩을 통과했습니다.
{{html}}: 출력 변수 html이지만 html 인코딩이 없으며 html 코드 출력에 적합합니다.
{{if }} {{else}}: 분기 논리를 제공합니다.
{{each}}: 루프 논리, $value 액세스 반복 변수를 제공합니다.

jquery tmpl 사용 방법:

템플릿 정의:

방법 1:

<script id="movieTemplate" type="text/x-jquery-tmpl"> 
<li> 
<b>${Name}</b> (${ReleaseYear}) 
</li> 
</script>

방법 2:

function makeTemplate(){ 
var markup='<li><b>${Name}</b> (${ReleaseYear})</li>‘; 
$.template(“movieTemplate”, markup); 
}

데이터:

var movies = [ 
{ Name: "The Red Violin", ReleaseYear: "1998" }, 
{ Name: "Eyes Wide Shut", ReleaseYear: "1999" }, 
{ Name: "The Inheritance", ReleaseYear: "1976" } 
];

스크립트:

$( "#movieTemplate" ).tmpl( movies ) 
.appendTo( "#movieList" );

예 1:

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script> 
</head> 
<body> 

<ul class="param-list"></ul> 

<script type="text/x-jquery-tmpl" id="new-param-tmpl"> 
<li rel="${num}"> 
<input type="text" name="key[${num}]" value="${key}" placeholder="key" /> = 
<input type="text" name="value[${num}]" value="${value}" placeholder="value" /> 
<button type="button" class="button small remove-param"><img src="http://mediacdn.disqus.com/1338845651/images/v3/icon/16/69.png" height="12" alt=""/></button> 
<button type="button" class="button small add-param"><span><img src="http://mediacdn.disqus.com/1338845651/images/v3/icon/16/13.png" height="12" alt=""/></button> 
</li> 
</script> 

<script> 
$(function(){ 
function addParam(key, value) { 
var param_list = $('.param-list'); 
var num = param_list.find('li').length; 

// build a template to clone the current row 
var built = $('#new-param-tmpl').tmpl({ 
num: num, 
key: key || '', 
value: value || '', 
}); 
if (key) param_list.prepend(built); 
else param_list.append(built); 

param_list.find('li:not(:last) .add-param').hide(); 
param_list.find('li:last .add-param').show(); 
param_list.find('li:not(:last) .remove-param').show(); 
param_list.find('li:last .remove-param').hide(); 
} 

// bind events 
$('.param-list .remove-param').live('click', function(){ 
$(this).parent().remove(); 
return false; 
}); 
$('.param-list .add-param').live('click', function(){ 
addParam(); 
return false; 
}); 

addParam(); 
})
</script> 
</body> 
</html>

예시 2

    성명:
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.