jQuery .tmpl() 사용 예 Introduction_jquery
- WBOY원래의
- 2016-05-16 16:38:581266검색
페이지 업데이트를 위한 동적 데이터 요청은 블로그 댓글의 페이징 동적 로드, 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