Ausführliche Erläuterung der Verwendung von jquery.tmpl, einem Framework zum Generieren von HTML mithilfe von Vorlagen-PHP开发-php.cn

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

高洛峰

Freigeben： 2016-12-19 09:23:52

Original

1661 Leute haben es durchsucht

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 );

Nach dem Login kopieren

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

Nach dem Login kopieren

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" );

Nach dem Login kopieren

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" } 
];

Nach dem Login kopieren

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>

Nach dem Login kopieren

{{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>

Nach dem Login kopieren

{{ if }} {{else}} stellt die Verzweigungslogik {{else}} bereit, die äquivalent zu else if

<🎜 ist > 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>

Nach dem Login kopieren

{{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>

Nach dem Login kopieren

{ {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>

Nach dem Login kopieren

{{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>

Nach dem Login kopieren

$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>

Nach dem Login kopieren

$.tmplItem() Methode können Sie die $item

Instanz

aus dem gerenderten Element < abrufen 🎜>

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

Nach dem Login kopieren

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