I was going through some tutorials for vue.js front end framework when i came across <template>tag being used in html code at a lot of places:
<template v-for="(choice,index) in choices">
<h1>{{ choice }}</h1>
<p>{{ index }}</p>
</template>
I wanted to know what exactly is the purpose of this element. Is it something usually used in front end development?
The <template> element in general
The HTML Content Template (<template>) element is a mechanism for
holding client-side content that is not to be rendered when a page is
loaded but may subsequently be instantiated during runtime using
JavaScript.
Think of a template as a content fragment that is being stored for
subsequent use in the document. While the parser does process the
contents of the <template> element while loading the page, it does so
only to ensure that those contents are valid; the element's contents
are not rendered, however.
##The <template> element in Vue.js
You can find more information about it in the Vue.js guide. For example, in the context of v-if.
Conditionally render the element based on the truthy-ness of the expression value. The element and its contained directives / components are destroyed and re-constructed during toggles. If the element is a <template> element, its content will be extracted as the conditional block.
What that means exactly can be seen in this example:
<div v-if="true">Foo</div>
<template v-if="true">Bar</template>
which will result in:
<div>Foo</div>
Bar
The <template> element will not be part of the DOM after if has been processed by Vue.js anymore. The same applies when using the v-for directive on <template>.
See MDN:
The HTML Content Template (<template>) element is a mechanism for
holding client-side content that is not to be rendered when a page is
loaded but may subsequently be instantiated during runtime using
JavaScript.
Think of a template as a content fragment that is being stored for
subsequent use in the document. While the parser does process the
contents of the <template> element while loading the page, it does
so only to ensure that those contents are valid; the element's
contents are not rendered, however.
or the HTML specification:
The template element is used to declare fragments of HTML that can be cloned and inserted in the document by script.
In a rendering, the template element represents nothing.
Related
I don't think what I want is possible but I thought I would ask anyway!
Is there a way to grab stuff in the initial HTML file, modify it and then add it to the DOM before it has rendered?
For example I have an HTML file:
<body>
<div>Something here</div>
</body>
Is there a way I can intercept that <div> before it is added to the DOM as the HTML file is parsed.
I do not want to modify it after it has already been added to the page for clarity.
For another example, if I have an <img src="someimage.jpg"> is there a way to change that src attribute before the image gets added to the DOM so the request is never made.
Happy enough to use inline JS in the <head> (well I assume that is what I would have to do anyway if this is actually possible.)
I know once I have a service worker this all becomes arbitrary but I am working on the assumption of a cold cache and no external files (it is to optimise "above the fold" content primarily).
A cheap and simple way to prevent HTML from rendering is to wrap it in a <template>.
Templates will be parsed during page load like any normal HTML, but put in different documentFragments instead of being rendered, waiting to be manipulated, cloned or inserted anywhere you want when you are ready to render.
HTTP requests will not fire.
<template id="some_tpl">
<img src="someimage.jpg">
</template>
const template = document.getElementById('some_tpl');
const templateContent = template.content;
document.body.appendChild(templateContent);
I want to re-use my custom web component. My web pages are primarily defined by HTML files, not Javascript. Is there any viable way to insert my component into my main file using HTML/Javascript/jQuery? (I know I could assemble it via server-side programming, but that's far less reusable.)
Simple Example
File widget.html:
<template>
// some content
</template
Main file main.html:
<div id="foo"></div>
<script>
$("#foo").load("widget.html); // does not work.
</script>
Note that this code fails for only the <template> ... </template> portion of any file I try to load. If I place other valid (and even invalid) HTML elements such as <div> or <foobar>, those elements get inserted into my page.
I have this small code that gets rendered the first time the page loads.
<div id="old-div">
<h2>{{description}}</h2>
<h2>{{example}}</h2>
</div>
Now the second time, an AJAX call happens and since first time the {{description}} and {{example}} are already filled, when i try to get the HTML of the template, instead of {{description}} and {{example}}, i get their values.
I don't want Handlebars to render the values to the expression when ajax call happens to that i can get the template and render new values.
Any help is appreciated.
Make a template, put it outside html <body> and use that to feed handlebars. You will be able to take it, feed handlebars and append to DOM with substituted values and retrieve the template itself (you can use <template> tag for it or <script> and add id attribute to reference it easily. That's how it's done on many websites.
I would suggest you to have a separate handlebar div for compilation purpose and use that compiled HTML to append in your appropriate div so that you don't override your handlebar code in HTML.
While reading the paper tabs component, I came to know that there is a tag <shadow></shadow> I tested it with one of my component. And it is working similar as <content></content> tag. So my question is what is the difference between them?
In polymer, the shadow tag is use when you extend another polymer element, the parent template will be inserted inside the shadow tag. Whereas the local dom will be inserted inside the content tag
They fulfill the same purpose of acting as an insertion point for content from outside the custom element and both are intended to being used on web component.
But where as <shadow> tag is used when you need to create more than one shadow root in a component.
More about these tags at:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Shadow
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/content
On our page, we have an application "Index" associated with a root element of id "root". I'm attempting to insert a very simple handlebars template into the page inline (inside of this application).
<div id="root">
...
<script type="text/x-handlebars"> (this is nested about 5 levels into "root")
{{foo}}
<script>
...
</div>
However, when the page loads, I find the result is the metamorph placeholder moves to become the first child of "root" (even though in markup, it's quite nested).
What's going on here? No matter where I place this inline template, it keeps going to this place? How do I keep it where it is in markup?
The location the script templates is unrelated to where it's placed in the page. You could add it in the head of the document and it would be placed there as well, since it's the application template (due to it being unnamed). Structure of your app is defined using the router.
Example of nested routes:
http://emberjs.jsbin.com/OxIDiVU/151/edit
Additionally if you want your application to start at a different element you would set the rootElement on the App.
App.rootElement = '#fooId';
Example of rootElement:
http://emberjs.jsbin.com/bucasumo/1/edit