Keywords: Client-Side Templating | HTML Script Tags | JavaScript Templating Engines
Abstract: This article provides an in-depth exploration of the <script type="text/template"> tag in HTML and its applications in client-side templating. By examining Backbone.js examples, it explains how browsers ignore such script tags and how JavaScript extracts template content for dynamic rendering. The discussion covers integration with mainstream templating libraries and includes practical code examples to illustrate syntax handling and structural differences.
Fundamental Principles of Client-Side Templating
In modern web development, the <script type="text/template"> tag serves as a prevalent method for implementing client-side templates. Its core mechanism leverages the browser's behavior of ignoring scripts with unrecognized types. When encountering a script tag with type="text/template", the browser skips parsing and execution entirely. This provides a secure container for storing template code containing special syntax (e.g., Underscore.js's <%= %> tags) without interfering with normal page rendering.
Extraction and Processing of Template Content
Template content can be easily extracted via JavaScript. For instance, using jQuery, one can retrieve the template string with $('#templateId').html(). The following code demonstrates the basic extraction process:
<script id="sampleTemplate" type="text/template">
<div class="user-card">
<h3><%= name %></h3>
<p>Email: <%= email %></p>
</div>
</script>
<script>
const templateStr = document.getElementById('sampleTemplate').innerHTML;
const compiledTemplate = _.template(templateStr);
const htmlOutput = compiledTemplate({ name: "John", email: "john@example.com" });
document.body.innerHTML += htmlOutput;
</script>Integration Practices with Mainstream Templating Libraries
The Backbone.js framework does not enforce a specific templating engine, allowing developers to choose from libraries like Mustache, Handlebars, or Underscore.js. Using Underscore.js as an example, its template syntax enables embedding JavaScript logic within <script type="text/template"> tags:
<script type="text/template" id="task-template">
<li class="<%= completed ? 'done' : '' %>">
<input type="checkbox" <%= completed ? 'checked' : '' %>>
<span><%= title %></span>
<button class="delete">Delete</button>
</li>
</script>Considerations for Template Formatting
In certain preprocessors like Pug/Jade, writing templates directly within multi-line script tags may cause indentation errors. The referenced article highlights that when template content includes HTML tags and Underscore.js syntax, improper indentation can trigger parsing exceptions. Solutions include:
- Using single-line formatting to avoid indentation conflicts
- Employing escape mechanisms to preserve original formatting
- Adopting external template files to separate logic
Analysis of Practical Application Scenarios
In single-page application (SPA) development, this technique is commonly used for dynamically generating lists, forms, and UI components. By separating templates from data, it enhances code maintainability and rendering efficiency. For example, in a TODO application, the HTML structure of each task item is defined via templates, and final DOM nodes are dynamically generated based on data states.