bitjson / s18n

Semantic localization for html.
MIT License
23 stars 10 forks source link

parsing content of <script type="text/template"> as <template> #18

Open kapouer opened 8 years ago

kapouer commented 8 years ago

For backward-compatibility reasons some applications cannot use <template> and use <script type="text/somethingelse"> to store html as text. s18n could try to parse the content of non-javascript <script> tags to see if by any chance it isn't filled with an html string.

bitjson commented 8 years ago

Hey @kapouer, thanks for opening an issue! Not sure if I understand completely – could you provide some example usage?

kapouer commented 8 years ago

This is how you'd do something with a template tag:

<template id="test"><div>Hi, ${user.name}</div></template>
<script>
  var templateNode = document.getElementById('test').content;
  var mergedNode = mergeData(templateNode, {
    user: { name : 'Joe' }
  });
  body.appendChild(document.importNode(mergedNode));
</script>

However, imagine you put

<template id="test">
  <img src="avatars/${user.avatar}">
</template>

on a browser not supporting <template>, the <img> tag is going to make the browser try to load the avatarts/${user.avatar} (probably a 404) resulting in a useless, to be avoided, http request. A workaround for that problem is to simply store templates as strings, in a place where the string won't be parsed as DOM like a <script type="text/template"> tag. There won't be any .content property, but using createHTMLDocument for example it is possible to make the browser parse the string "off-line".