javascript html - Erklärung von <script type = "text / template"> ... </ script>





tag jquery (7)


Es ist eine Möglichkeit, HTML Text hinzuzufügen, ohne dass es gerendert oder normalisiert wird.

Es ist nicht anders als es hinzuzufügen:

 <textarea style="display:none"><span>{{name}}</span></textarea>

Ich bin gerade auf etwas gestoßen, das ich noch nie zuvor gesehen habe. In der Quelle von Backbone.js 'Beispiel TODO-Anwendung ( Backbone TODO Beispiel ) hatten sie ihre Vorlagen in einem <script type = "text/template"></script> , das Code enthielt, der wie etwas aus PHP, aber mit JavaScript-Tags aussieht .

Kann mir das jemand erklären? Ist das legitim?




jQuery Templates ist ein Beispiel für etwas, das diese Methode verwendet, um HTML zu speichern, das nicht direkt gerendert wird (das ist der springende Punkt) in anderem HTML: http://api.jquery.com/jQuery.template/




Es ist echt und sehr praktisch!

Versuche dies:

<script id="hello" type="text/template">
  Hello world
</script>
<script>
  alert($('#hello').html());
</script>

Mehrere Javascript Templating-Bibliotheken verwenden diese Technik. Handlebars.js ist ein gutes Beispiel.




Um Box9's Antwort hinzuzufügen:

Backbone.js ist abhängig von underscore.js, die selbst John Resigs ursprüngliche Mikrotemplates implementiert.

Wenn Sie sich für die Verwendung von Backbone.js mit Rails entscheiden, sollten Sie sich unbedingt das Jammit-Juwel ansehen. Es bietet eine sehr saubere Möglichkeit, die Asset-Paketierung für Vorlagen zu verwalten. http://documentcloud.github.com/jammit/#jst

Standardmäßig verwendet Jammit auch JResigs Mikrotemplates, aber es erlaubt Ihnen auch, das Templating-Modul zu ersetzen.




Wenn Sie einen anderen Skript-Tag- type als text/javascript , führt der Browser den internen Code des Skript-Tags nicht aus. Dies wird als Mikrovorlage bezeichnet. Dieses Konzept wird häufig in Single-Page-Anwendungen (auch bekannt als SPA) verwendet.

<script type="text/template">I am a Micro template. 
  I am going to make your web page faster.</script>

Bei Micro-Vorlagen ist der Typ des Skript-Tags text/template . Es ist sehr gut von Jquery Schöpfer John Resig erklärt http://ejohn.org/blog/javascript-micro-templating/




<script type = “text/template”> … </script> ist veraltet. Verwenden Sie stattdessen das <template> -Tag.




Hier ist ein einfacher if / else-Check in underscore.js, wenn Sie einen Null-Check einbeziehen müssen.

<div class="editor-label">
    <label>First Name : </label>
</div>
<div class="editor-field">
    <% if(FirstName == null) { %>
        <input type="text" id="txtFirstName" value="" />
    <% } else { %>
        <input type="text" id="txtFirstName" value="<%=FirstName%>" />
    <% } %>
</div>




javascript templates types backbone.js underscore.js