Heim > Artikel > Web-Frontend > Beherrschen Sie die JQuery-Templ-Vorlage vollständig

Beherrschen Sie die JQuery-Templ-Vorlage vollständig

小云云Original: 2017-12-29 11:30:246167Durchsuche

Bevor ich Angular zum Rendern von Vorlagen verwendet habe, habe ich versehentlich die leichtgewichtige JQuery-Tmpl-Vorlage entdeckt. Die Dokumentation dazu finden Sie hier. In diesem Artikel finden Sie hauptsächlich eine JQuery-Tmpl-Vorlage (Erklärung mit Beispielen). Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Offizielle Erklärung des Plug-Ins: Verwenden Sie das übereinstimmende erste Element als Vorlage, rendern Sie die angegebenen Daten und die Signatur lautet wie folgt:

.tmpl([data,][options])

Der Zweck der Parameterdaten liegt auf der Hand: Die zum Rendern verwendeten Daten können von jedem JS-Typ sein, einschließlich Arrays und Objekten. Optionen sind im Allgemeinen Optionen. Der Beamte wies darauf hin, dass es sich bei den Optionen hier um eine Zuordnung benutzerdefinierter Schlüssel-Wert-Paare handelt, die von der tmplItem-Datenstruktur geerbt werden und für die Verwendung während der Renderaktion der Vorlage geeignet sind.

Sie können das neueste tmpl-Plug-in hier herunterladen. Es ist erwähnenswert, dass der Beamte auch angegeben hat, dass tmpl derzeit eine Beta-Version ist und mit Vorsicht verwendet werden sollte.

Das Folgende ist ein einfaches Beispiel

<!DOCTYPE html>
<html>
<head>
 <title>jquery template demo</title>
 <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="js/jquery.tmpl.js"></script>
 <script id="myTemplate" type="text/x-jquery-tmpl">
  <tr><td>${ID}</td><td>${Name}</td></tr>
 </script>
 <script type="text/javascript">
  $(function () {
   var users = [{ ID: &#39;hao1&#39;, Name: &#39;Tony&#39; }, { ID: &#39;hao2&#39;, Name: &#39;Mary hui&#39;}];
   $(&#39;#myTemplate&#39;).tmpl(users).appendTo(&#39;#rows&#39;);
  });
 </script>
 <style type="text/css">
  body
  {
   padding: 10px;
  }
  table
  {
   border-collapse: collapse;
  }
 </style>
</head>
<body>
 <table cellspacing="0" cellpadding="4" border="1">
  <tbody id="rows">
  </tbody>
 </table>
</body>
</html>

Der Effekt ist wie folgt

Beim Definieren der Vorlage wird empfohlen,

<script id=&#39;templateName&#39; type=&#39;text/x-jquery-tmpl&#39;></script>

als Wrapper für zu definieren und zu verwenden Vorlage, aber die Definitionsmethode ist nicht die einzige. Sie können

<p id="template" > <!-- markup --></p>

verwenden, um die Vorlage in jQuery .tmpl() zu kompilieren und zwischenzuspeichern Kompilieren und speichern Sie die Vorlage auch im Voraus. Verwenden Sie sie dann bei Bedarf, was für einige Datenverschachtelungen sehr nützlich ist, z. B.:

HTML:

<table cellspacing="0" cellpadding="4" border="1">
 <tbody id="compileRows">
 </tbody>
</table>

JavaScript:

<script id="compile1" type="text/x-jquery-tmpl">
 {{tmpl &#39;cached&#39;}}
 <tr><td>${ID}</td><td>${Name}</td></tr>
</script>
<script id="compile2" type="type/x-jquery-tmpl">
 <tr><td colspan="2">${Group}</td></tr>
</script>
<script type="text/javascript">
 $(function () {
  var groupUsers = [{ ID: &#39;hao1&#39;, Name: &#39;Tony&#39;, Group: &#39;Administrators&#39; }, { ID: &#39;hao2&#39;, Name: &#39;Mary hui&#39;, Group: &#39;Users&#39;}];
  $(&#39;#compile2&#39;).template(&#39;cached&#39;);
  $(&#39;#compile1&#39;).tmpl(groupUsers).appendTo(&#39;#compileRows&#39;);
 });
</script>

Der Effekt ist wie folgt

$.template( ) Methode, wird ein Stück HTML in eine Vorlage kompilieren, Beispiel:

JavaScript

var markup = &#39;<tr><td>${ID}</td><td>${Name}</td></tr>&#39;;
$.template(&#39;template&#39;, markup);
$.tmpl(&#39;template&#39;, users).appendTo(&#39;#templateRows&#39;);

Auf diese Weise wird die Vorlage erstellt Im Markup definierte Elemente können auf das templateRows-Objekt angewendet werden.

jQuery .tmpl() Tags, Ausdrücke, Attribute:

${}: Dem vorherigen Beispiel nach zu urteilen, ist die Rolle dieses Tags offensichtlich, es entspricht einem Platzhalter ist eine andere Möglichkeit, es zu schreiben {{= Feld}}, wie zum Beispiel:

<script id="myTemplate" type="text/x-jquery-tmpl">
 <tr><td>{{= ID}}</td><td>{{= Name}}</td></tr>
</script>

Es muss beachtet werden, dass dem Zeichen „=“ ein Leerzeichen folgen muss. Sonst hat es keine Wirkung.

jQuery .tmpl() hat zwei nützliche Attribute: $item, $data:

$item repräsentiert die aktuelle Vorlage; $data repräsentiert die aktuellen Daten.

Html

<table cellspacing="0" cellpadding="4" border="1">
  <tbody id="propertyRows">
  </tbody>
 </table>

Javascript

<script id="property" type="text/x-jquery-tmpl">
 <tr><td>${ID}</td><td>${$data.Name}</td><td>${$item.getLangs(&#39;; &#39;)}</td></tr> </script>
<script type="text/javascript">
  $(function () {
  var userLangs = [{ ID: &#39;hao1&#39;, Name: &#39;Tony&#39;, Langs: [&#39;PHP&#39;, &#39;Python&#39;] }, { ID: &#39;hao2&#39;, Name: &#39;Mary hui&#39;, Langs: [&#39;Java&#39;, &#39;C#&#39;]}];
  $(&#39;#property&#39;).tmpl(userLangs, {
   getLangs: function (separator) {
    return this.data.Langs.join(separator);
   }
   }).appendTo(&#39;#propertyRows&#39;);
  });
</script>

{{each}}Sie können auf den ersten Blick erkennen, dass dieses Tag für Schleifen verwendet wird. Die Verwendung ist wie folgt: (keywords{{each Array}}, $value, $ index)

HTML

<ul id="ul_each"></ul>

Javascript

<script id="eachList" type="text/x-jquery-tmpl">
 <li class="li">
 <span class="a">ID: ${ID};</span>
 <span class="b">Name: ${Name};</span><br/>
 <span class="c">Langs:
  <ul>
  {{each Langs}}
   <li>
   ${$index + 1}:${$value}.
   </li>
  {{/each}}
  </ul>
 </span>
 </li>
</script>
<script type="text/javascript">
 $(function () {
 var userLangs = [{ ID: &#39;hao1&#39;, Name: &#39;Tony&#39;, Langs: [&#39;PHP&#39;, &#39;Python&#39;] }, { ID: &#39;hao2&#39;, Name: &#39;Mary hui&#39;, Langs: [&#39;Java&#39;, &#39;C#&#39;]}];
 $(&#39;#eachList&#39;).tmpl(userLangs).appendTo(&#39;#ul_each&#39;);
 });
</script>

The Der Effekt ist wie folgt

{{each}} Es gibt eine andere Schreibweise:

Javascript

<script id="eachList2" type="text/x-jquery-tmpl">
 <li class="li">
 <span class="a">ID: ${ID};</span>
 <span class="b">Name: ${Name};</span><br/>
 <span class="c">Langs:
  <ul>
  {{each(i,lang) Langs}}
   <li>
   ${i+1}:${lang}
   </li>
  {{/each}}
  </ul>
 </span>
 </li>
</script>

Die Funktion ist die gleiche wie die vorherige.

{{if}} und {{else}}, diese beiden Tags sollten auf einen Blick leicht zu verstehen sein:

Javascript

<script id="ifelse" type="text/x-jquery-tmpl">
  <tr>
  <td>${ID}</td>
  <td>${Name}</td>
  <td>
   {{if Langs.length > 1}}
    ${Langs.join(&#39;; &#39;)}
   {{else}}
    ${Langs}
   {{/if}}
  </td>
 </tr>
</script>

Wenn mehr als 1 Langs-Array-Element vorhanden ist, verwenden Sie „;“, um sie zu verbinden, andernfalls wird Langs direkt angezeigt. Der Effekt ist wie folgt:

{{html}}, ersetzen Sie den Objektattributwert direkt als HTML-Code durch die Platzhaltermethode

$.tmplItem() Mit dieser Methode können Sie von render $item für das ausgegebene Element erneut erwerben, Beispiel:

$(&#39;tbody&#39;).delegate(&#39;tr&#39;, &#39;click&#39;, function () {
 var item = $.tmplItem(this);
 alert(item.data.Name);
});

Der Effekt ist wie folgt:

Verwandte Empfehlungen:

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

Nachdem jQuery json erhalten hat, verwenden Sie zy_tmpl, um ein Dropdown-Menü zu generieren, jsonzy_tmpl_PHP-Tutorial

Verwenden Sie zy_tmpl, um ein Dropdown-Menü zu generieren, nachdem jQuery das json_PHP-Tutorial erhalten hat

Das obige ist der detaillierte Inhalt vonBeherrschen Sie die JQuery-Templ-Vorlage vollständig. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Tutorial zur Implementierung der Dropdown-Listenfunktion mit JQuery und CSSNächster Artikel：Tutorial zur Implementierung der Dropdown-Listenfunktion mit JQuery und CSS

In Verbindung stehende Artikel

Mehr sehen