페이지 업데이트를 위한 동적 데이터 요청은 블로그 댓글의 페이징 동적 로드, 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