템플릿을 사용하여 HTML을 생성하는 프레임워크인 jquery.tmpl 사용에 대한 자세한 설명

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

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

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

그래서 템플릿을 사용하여 HTML을 생성하는 프레임워크가 속속 등장하고 있는데, 그 중 jquery.tmpl의 사용법을 자세히 소개하겠습니다.

다음은 이에 중점을 두고 있습니다. 사용법:

먼저 템플릿과 데이터를 소개하겠습니다. 말할 필요도 없이 이 두 가지는 반드시 필요합니다.

템플릿을 정의하는 방법에는 두 가지가 있습니다

var markup = "<li>Some content: ${item}.<br/>" 
+ " More content: ${myValue}.</li>";
$.template( "movieTemplate", markup );

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

이렇게 두 개의 템플릿이 정의되는데 전자는 스크립트로 작성하고 후자는 html로 작성합니다

데이터는 json

다음은 템플릿 렌더링을 시작합니다

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

참고: 영화는 json 데이터 배열입니다

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

jquery.tmpl의 몇 가지 공통 태그는 다음과 같습니다.

${}, {{각}}, {{if }}, {{else}}, {{html}}

일반적이지 않은 태그

{{=}},{{tmpl }} 및 {{wrap}}.

${}는 {{=}}와 동일하며 출력 변수입니다. 표현식은 ${}에도 배치할 수 있습니다(=와 사이에 공백이 있어야 함). 그렇지 않으면 유효하지 않습니다.)

예:

<div id="div_demo">
</div>
<script id="demo" type="text/x-jquery-tmpl">
    <div style="margin-bottom:10px;">
    　　<span>${ID}</span>
    　　<span style="margin-left:10px;">{{= Name}}</span>
    　　<span style="margin-left:10px;">${Number(Num)+1}</span>
    　　<span style="margin-left:10px;">${Status}</span>
    </div>
</script>
<script type="text/javascript">
　　var users = [{ ID: &#39;think8848&#39;, Name: &#39;Joseph Chan&#39;, Num: &#39;1&#39;, Status: 1 }, { ID: &#39;aCloud&#39;, Name: &#39;Mary Cheung&#39;, Num: &#39;2&#39;}];
　　$("#demo").tmpl(users).appendTo(&#39;#div_demo&#39;);
</script>

{{each}}는 루프 논리를 제공하고 $value는 반복 변수에 액세스하며 반복 변수를 사용자 정의할 수도 있습니다( i, 값)

예:

<div id="div_each">
</div>
<script id="each" type="text/x-jquery-tmpl"> 
    <h3>users</h3>
    {{each(i,user) users}}
        <div>${i+1}:{{= user.name}}</div>
        {{if i==0}}
            <h4>group</h4>
            {{each(j,group) groups}}
                <div>${group.name}</div>
            {{/each}}
        {{/if}}
    {{/each}}
    <h3>depart</h3>
    {{each departs}}
        <div>{{= $value.name}}</div>
    {{/each}}
</script> 
<script type="text/javascript">
　　var eachData = { users: [{ name: &#39;jerry&#39; }, { name: &#39;john&#39;}], groups: [{ name: &#39;mingdao&#39; }, { name: &#39;meihua&#39; }, { name: &#39;test&#39;}], departs: [{ name: &#39;IT&#39;}] };
　　$("#each").tmpl(eachData).appendTo(&#39;#div_each&#39;);
</script>

{{ if }} {{else}}는 else if

예시 :

<div id="div_ifelse"></div>
<script id="ifelse" type="text/x-jquery-tmpl"> 
    <div style="margin-bottom:10px;"><span>${ID}</span><span style="margin-left:10px;">{{= Name}}</span>
        {{if Status}}
            <span>Status${Status}</span>
        {{else App}}
            <span>App${App}</span>
        {{else}}
            <span>None</span>
        {{/if}}
    </div>
</script> 
<script type="text/javascript">
　　var users = [{ ID: &#39;think8848&#39;, Name: &#39;Joseph Chan&#39;, Status: 1, App: 0 }, { ID: &#39;aCloud&#39;, Name: &#39;Mary Cheung&#39;, App: 1 }, { ID: &#39;bMingdao&#39;, Name: &#39;Jerry Jin&#39;}];
    $("#ifelse").tmpl(users).appendTo(&#39;#div_ifelse&#39;);
</script>

{{html}} 출력변수 html 인데 html Coding이 없어 html 코드 출력에 적합

예시

<div id="div_html"></div>
<script id="html" type="text/x-jquery-tmpl"> 
    <div style="margin-bottom:10px;">
　　　　<span>${ID}</span>
　　　　<span style="margin-left:10px;">{{= Name}}</span>
    　　${html}
    　　{{html html}}
    </div>
</script> 
<script type="text/javascript">
　　var user = { ID: &#39;think8848&#39;, Name: &#39;Joseph Chan&#39;, html: &#39;<button>html</button>&#39; };
  　$("#html").tmpl(user).appendTo(&#39;#div_html&#39;);
</script>

{ {tmpl}} 중첩 템플릿

예

<div id="tmpl"></div>
<script id="tmpl1" type="text/x-jquery-tmpl">
    <div style="margin-bottom:10px;">
    　　<span>${ID}</span>
    　　<span style="margin-left:10px;">{{tmpl($data) &#39;#tmpl2&#39;}}</span>
    </div>     
</script>
<script id="tmpl2" type="type/x-jquery-tmpl">
    {{each Name}}${$value}  {{/each}}   
</script>
<script type="text/javascript">
　　var users = [{ ID: &#39;think8848&#39;, Name: [&#39;Joseph&#39;, &#39;Chan&#39;] }, { ID: &#39;aCloud&#39;, Name: [&#39;Mary&#39;, &#39;Cheung&#39;]}];
   $("#tmpl1").tmpl(users).appendTo(&#39;#tmpl&#39;);
</script>

{{wrap} }, 래퍼

인스턴스

<div id="wrapDemo">
    </div>
<script id="myTmpl" type="text/x-jquery-tmpl">
    The following wraps and reorders some HTML content:
    {{wrap "#tableWrapper"}}
        <h3>One</h3>
        <div>
            First <b>content</b>
        </div>
        <h3>Two</h3>
        <div>
            And <em>more</em> <b>content</b>...
        </div>
    {{/wrap}}
    </script>
<script id="tableWrapper" type="text/x-jquery-tmpl">
    <table cellspacing="0" cellpadding="3" border="1"><tbody>
        <tr>
            {{each $item.html("h3", true)}}
                <td>
                    ${$value}
                </td>
            {{/each}}
        </tr>
        <tr>
            {{each $item.html("div")}}
                <td>
                    {{html $value}}
                </td>
            {{/each}}
        </tr>
    </tbody></table>
    </script>
 <script type="text/javascript">
        $(function () {
            $(&#39;#myTmpl&#39;).tmpl().appendTo(&#39;#wrapDemo&#39;);
        });
    </script>

$data $item $ item은 현재 템플릿을 나타내고 $data는 현재 데이터를 나타냅니다.

예:

<div id="div_item_data"></div>
<script id="item_data" type="text/x-jquery-tmpl"> 
     <div style="margin-bottom:10px;">
　　　　<span>${$data.ID}</span>
　　　　<span style="margin-left:10px;">${$item.getName(" ")}</span>
　　　</div>
</script> 
<script type="text/javascript">
 　　var users = [{ ID: &#39;think8848&#39;, Name: [&#39;Joseph&#39;, &#39;Chan&#39;] }, { ID: &#39;aCloud&#39;, Name: [&#39;Mary&#39;, &#39;Cheung&#39;]}];
     $("#item_data").tmpl(users,
                {
                getName: function (spr) {
                   return this.data.Name.join(spr);
                }
                }).appendTo(&#39;#div_item_data&#39;);
</script>

$.tmplItem() 메서드, 이 메서드를 사용하면 렌더링된 요소에서 $item

인스턴스

를 가져올 수 있습니다. 🎜>

<script type="text/javascript">
　　$(&#39;#demo&#39;).delegate(&#39;div&#39;, &#39;click&#39;, function () {
                var item = $.tmplItem(this);
                alert(item.data.Name);
            });
</script>

템플릿을 사용하여 HTML을 생성하는 프레임워크 jquery.tmpl에 대한 자세한 사용법은 PHP 중국어 웹사이트를 참고하세요. 조항!