Ausführliche Erläuterung der Verwendung von jquery.tmpl, einem Framework zum Generieren von HTML mithilfe von Vorlagen

Das dynamische Anfordern von Daten zum Aktualisieren der Seite ist heutzutage eine sehr verbreitete Methode, wie z. B. das dynamische Laden von Blog-Kommentaren durch Paging, das rollierende Laden und das geplante Laden von Anfragen von Weibo usw.

In diesen Fällen handelt es sich bei den von der dynamischen Anfrage zurückgegebenen Daten normalerweise um assembliertes HTML, JSON oder XML. Kurz gesagt, die Daten werden nicht auf der Browserseite, sondern auf der Serverseite assembliert. Allerdings ist die Rückgabe von HTML hinsichtlich des Übertragungsvolumens nicht kosteneffektiv, und bei Webübertragungen wird JSON mittlerweile häufiger verwendet als XML.

Ein sehr problematischer Teil der Browser-basierten HTML-Generierung besteht darin, dass es in Ordnung ist, wenn die Struktur nicht komplex ist, aber sobald die Struktur komplex ist, wird es zu einem Albtraum. Sie müssen sehr vorsichtig sein etwas zu schreiben, das fast unmöglich zu warten ist.

Daher sind nacheinander einige Frameworks erschienen, die Vorlagen zum Generieren von HTML verwenden. Eines davon ist die Verwendung von jquery.tmpl.

Das Folgende konzentriert sich auf die Verwendung:

Lassen Sie uns zunächst Vorlagen und Daten vorstellen. Diese beiden sind auf jeden Fall unverzichtbar.

Es gibt zwei Möglichkeiten, Vorlagen zu definieren.

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>

Auf diese Weise werden zwei Vorlagen definiert, die erste ist in Skript geschrieben und die zweite ist in HTML geschrieben

Die Daten sind JSON

Folgendes beginnt mit dem Rendern der Vorlage

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

Hinweis: movies ist ein JSON-Datenarray

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

Mehrere häufige Tags von jquery.tmpl sind:

${}, {{each}}, {{if }}, {{else}}, {{html}}

Ungewöhnliche Tags

{{=}},{{tmpl }} und {{wrap}}.

${} entspricht {{=}} und ist eine Ausgabevariable. Ausdrücke können auch in ${} platziert werden (zwischen = und muss ein Leerzeichen stehen die Variable, sonst ist sie ungültig)

Beispiel:

<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}} stellt Schleifenlogik bereit, $value greift auf die Iterationsvariable zu und Sie können die Iterationsvariable auch anpassen ( i, Wert)

Beispiel:

<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}} stellt die Verzweigungslogik {{else}} bereit, die äquivalent zu else if

Beispiel:

<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}} Ausgabevariable HTML, aber es gibt keine HTML-Codierung, geeignet für die Ausgabe von HTML-Code

Beispiel

<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}} Verschachtelte Vorlage

Beispiel

<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} }, Wrapper

Instanz

<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 repräsentiert die aktuelle Vorlage; $data repräsentiert die aktuellen Daten.

Beispiel:

<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() Methode können Sie die $item

Instanz

aus dem gerenderten Element

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

Für eine detailliertere Verwendung des Frameworks jquery.tmpl, das Vorlagen zum Generieren von HTML verwendet, beachten Sie bitte die chinesische PHP-Website!