Home > Developer > Web Develop
Transfer from http://www.zhangxinxu.com/wordpress/2014/07/hello-html5-template-tag/
In a single page application, we have higher requirements for no refresh of the page, HTML is no longer generated by the backend, the backend only provides a rest API, return JSON data, the template engine can greatly facilitate us to render a view. Instead of straining to use Jqeury to stitch a DOM.
In the now more common JS MVC framework:backbone, Emberjs, Angularjs, templates are very important for a component.
The first thing to make clear is that the template document has the following 2 requirements:
1. <> "' not be converted into character entities;
2. The img tag with the SRC attribute does not trigger a resource request.
First , HTML5 template element initial face<template>element, which is basically determined to be 2013. What do you use, as implies, is to declare "template element".
For now, we embed template HTML in HTML, often in a similar way:
<script type= "Text/template" >//...</script>
In fact, there is no type="text/template" such standard notation, and the <template> presence of elements is intended to make HTML template HTML more standard and prescriptive.
Previously, we may have used <textarea> or <xmp> (abolished but still usable) nested non-escaped HTML tag code to implement some specific front-end functionality, but, again, as in the above popular usage, are not standardized. From the future trend, obviously the <template> label is the king. However, compatibility is an issue that cannot be ignored, so even if you pull a lot less and have a limited amount of real value, here's just a brief introduction.
Look at the following four nested image HTML, while the picture content is not displayed, there will be no way to ask:
<script type= "text/template" ></script>
<textarea style= "Display:none;" ></textarea>
<XMP style= "Display:none;" ></xmp>
<template></template>
1. Label Content Concealment
<script> itself, so that the internal HTML tags are processed by string, so the innate content is not displayed. However, in Dreamweaver, there is a big problem with this notation, that is, when you write template HTML in script , the label automatically closes forever as </script> this is annoying. <textarea> is a text field in which nested HTML fragments are treated as values of the text fields. However, the text field itself is visible, so additional settings are required for display:none; <xmp> is a very old and special attribute, with the semantics of example , example. It is said that it was later abolished by the <pre> tag, which, in fact, is currently supported by all browsers. However, it cannot be equated with the <pre> label. <pre> has a tag that shows a picture, and <xmp> renders a piece of HTML code. However, as with <textarea> , if the content does not appear, additional settings are required display:none; <template> no settings on the label Display:none; , Notice No. Why? This is just the original feature of the <template> tag element, which is inherently display:none , and the content inside the template element is not rendered. Therefore, you do not have to set hide. 2. Label position arbitrariness
In addition to <template> the above sub-elements of natural hiding, the <template> label also has a feature, is the position of arbitrary, which is very similar <script> or <style> label, can be in , or can be in <body> or <frameset> .
3. ChildNodes Invalidity
Although, the naked eye appears to be a <template> label with a lot of sub-tags, this inertia thinking is not useful here. Assuming that the variable template is a <template> tagged dom we get (inside a whole bunch of HTML code), you'll find: template.childNodes It's a big fart. We can use to template.innerHTML get the full HTML fragment. If you have to get "pseudo child elements". There are ways, OK, wide eyes, to use content attributes.
template.contentwill return a document fragment that you can understand as another document , and then use document some of the query APIs to get the <template> "pseudo child elements" inside the tag. For example, getting the first picture element is:
var Image_first = template.content.querySelector ("img");
third, HTML5 template element end surfaceTemplate elements and CSS
If the browser derelict, considered to be <template> a normal custom element, then the display will make the following appearance, the internal label according to the general label rendering, such as IE11:
If the browser is up to date, the display will be the following, its own CSS rendering, internal tags directly different space does not render, such as Chrome:
In other words, although from a CSS point of view, <template> is a common element with CSS, but, from the HTML point of view, it is like with the Earth's writing wheel eye, can let the internal label transfer to the different space, blood boundary like rare.
By default, it <template> is hidden and is actually the default display property of the none . Use the following code to test the information:
window.getComputedStyle (template). display; The result is "none"
Therefore, the following CSS declarations are set in the demo:
template {display:block; ...}
Cloning of templates
If you are working on an HTML string, similar to the current popular MVC framework or template technology, it is template.innerHTML sufficient. However, <template> <script> what is more powerful is that the <script> internal content can only be obtained as a string, and <template> although it exists in a different space, it is still possible to get nodes (shown above), as well as complete clones, with syntax similar to the following:
var clone = Document.importnode (Template.content, true);
You can then use the Append node (appendchild) to load the template content instead of (not having to choose) the append string to load the template content.
HTML5 template Element
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
