HTML Templates shim?

[Simon Kaegi]

I work on an open source developer tooling project called Orion [http://eclipse.org/orion/] that has very simple templating requirements and wonder if some of this work might be helpful. Our application is entirely client-side and I would like to avoid bringing in a 3rd party dependency (like mustache and friends) if there is a good chance something will be built directly into the browser.

At the moment I'd be happy if we just had a decent way to get our templates out of our JS files and into our HTML files. I'm curious if anyone already has a workable shim for <template> e.g. http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/templates/index.html. FWIW I'm less interested in the binding aspects at the moment.

If no-one has built such a shim would you recommend starting from a template element with display:none or using a script element with type="text/x-html-template". Any usage examples or implementation hints you could point me at would help.

Thanks

-Simon

[Rafael Weinstein]

Hi Simon,

Before browsers implement & ship <template> the two options you list
above are your basic choices, and each has drawbacks:

-Using <template> with display:none means you have to take care to not
accidentally fetch resources or run script (e.g. <template><img
src="/myImages/{{ replaceMe }}/"></template>), and you won't be able
to use it in certain locations (e.g. <table><template><tr>, or
<select><template><option>

-Using <script type="myTemplate"> means your templates are just text
(not parsed), and you'll need to parse them with innerHTML (and take
care not to create XSS vectors). It also means your template's can't
include a </script> tag.

If you care about security (XSS), I would recommend using an existing
library that's widely deployed and well vetted. Templating is each to
get kind-of working and hard to get all the kinks worked out of.

>
> Thanks
> -Simon
>
>

[Simon Kaegi]

Here's a very basic shim I wrote -- https://github.com/eclipse/orion.client/blob/master/bundles/org.eclipse.orion.client.core/web/orion/HTMLTemplates-shim.js

I've just written some very basic tests to handle three variations of the commentTemplate.

e.g.

<script type="text/x-html-template">

<template id="commentTemplate">

   <div>

       <img src="">

       <div class="comment"></div>

       …

   </div>

</template>

</script>

<script type="text/x-html-template">

<!--

<template id="commentTemplate2">

   <div>

       <img src="">

       <div class="comment2"></div>

       …

   </div>

</template>

-->

</script>

<template id="commentTemplate3">

   <div>

       <img src="">

       <div class="comment3"></div>

       …

   </div>

</template>

The tests are not close to done but what I have is here -- https://github.com/eclipse/orion.client/tree/master/bundles/org.eclipse.orion.client.core/web/js-tests/HTMLTemplates

At the moment it doesn't handle dynamic addition of new templates or setting the innerHTML of a template but I'm hoping this might help out adoption a little if we can polish it a bit.

-Simon