Explanation of <Script Type = "Text/Template"> ... </Script>

Explanation of script type = text/template ... /script

Those script tags are a common way to implement templating functionality (like in PHP) but on the client side.

By setting the type to "text/template", it's not a script that the browser can understand, and so the browser will simply ignore it. This allows you to put anything in there, which can then be extracted later and used by a templating library to generate HTML snippets.

Backbone doesn't force you to use any particular templating library - there are quite a few out there: Mustache, Haml, Eco,Google Closure template, and so on (the one used in the example you linked to is underscore.js). These will use their own syntax for you to write within those script tags.

What difference between tag template and script type = 'text/template'?

<template> is used to define reusable snippets of HTML that Javascript can use. You would define it with an id, and then use it.

<script type='text/template'> escapes the normal HTML processor because text/template is not a valid MIME type. Thus is outputs as plain-text. Learn more here: Explanation of <script type = "text/template"> ... </script>

EDIT:

text/html indicates that the HTML processor should be applied, formatting all HTML tags and the like.

What are modern uses of script type= text/html and is this example considered good use?

According to the HTML5 spec for the script tag, it's totally fine to use <script> with a type attribute set to any valid MIME type. That includes MIME types like text/html or text/plain.

According to the HTML4 spec for the script tag, it's not quite fine:

"There are two types of scripts authors may attach to an HTML
document: Those that are executed one time when the document is loaded
[and t]hose that are executed every time a specific event occurs"

You don't need backbone for templating. You can use e.g. jQuery or my personal favorite, Mustache.js.

Including script tag in script type= text/template tag

No, that's not going to work for you. Not only is it invalid to have a <script></script> inside of another <script>, it wouldn't work even if the browser could parse it correctly. However, all you need to do is provide the javascript files you want to load in another manner, like in a dataset attribute. Additionally, as Quentin pointed out, text/template isn't a standard type, so prefix it with x- as standard practice

<script type="text/x-template" id="home" data-jsassets="location.js,/path/to/some/other.js">
   ...
</script>

Now, retrieve the comma-delimted list of javascript to load and inject it into the page, which will run the script:

var tpl, jsassets, tag, i,l;
tpl = document.getElementById('home');
// At this point, ensure your template has been rendered and attached to the page
// by your template processor
jsassets = (tpl.getAttribute('data-jsassets') || '').split(',');
for(i = 0, l = jsassets.length; i < l; i++){
  tag = document.createElement('script');
  tag.type = "text/javascript";
  tag.src = jsassets[i];
  document.head.appendChild(tag);
}

How to add external JS scripts to VueJS Components?

A simple and effective way to solve this, it's by adding your external script into the vue mounted() of your component. I will illustrate you with the Google Recaptcha script:

<template>
   .... your HTML
</template>

<script>
  export default {
    data: () => ({
      ......data of your component
    }),
    mounted() {
      let recaptchaScript = document.createElement('script')
      recaptchaScript.setAttribute('src', 'https://www.google.com/recaptcha/api.js')
      document.head.appendChild(recaptchaScript)
    },
    methods: {
      ......methods of your component
    }
  }
</script>

Source: https://medium.com/@lassiuosukainen/how-to-include-a-script-tag-on-a-vue-component-fe10940af9e8

Do you need text/javascript specified in your script tags?

See Crockford's write-up on the <script> tag, most notably:

Do not use the <!-- //--> hack with scripts. It was intended to prevent scripts from showing up as text on the first generation browsers Netscape 1 and Mosaic. It has not been necessary for many years. <!-- //--> is supposed to signal an HTML comment. Comments should be ignored, not compiled and executed. Also, HTML comments are not to include --, so a script that decrements has an HTML error.

...

type="text/javascript"

This attribute is optional. Since Netscape 2, the default programming language in all browsers has been JavaScript. In XHTML, this attribute is required and unnecessary. In HTML, it is better to leave it out. The browser knows what to do.

Script type template include script tag

The content of a script tag is treated as plain text.

So the <script> start tag inside is treated as text, and the first </script> end tag is treated as the end of the script element.

The second </script> end tag is then discarded because there is no matching, open script element.

---

Use a <script> element as a place to hold a template is a dirty hack. You've just found a point where it breaks.

Consider using a <template> element instead. Mind out for browser support.

---

Related Topics