Handlebars.js: Including a <script> tag in a template?

[julien51]

We're trying to include a couple gists in our content, but obviously adding <script src="https://gist.github.com/4332573.js"/></script> in a handlebar template breaks it.

Is there a way to "escape" the script tags?

[jorilallo]

You need to add them dynamically, i.e. https://gist.github.com/jeremiahlee/1748966

[julien51]

Meh. That's quite ugly, but I guess if that's the only way, I'll use that =( There must be something smarter, please @wycats tell me there is something smarter! Thanks @jorde :)

[chrislondon]

I'm new here but I would think that precompiling your templates could solve the issue!

[kpdecker]

I'm not sure what is breaking for you but on the escaping side,I think this all depends on how the templates are being defined.

I would recommend the dynamic approach as script elements injected via innerHTML have different behaviors across different browsers, with some browsers, particularly older versions of IE, silently dropping content. Zepto attempts to work around this: https://github.com/madrobby/zepto/blob/master/src/zepto.js#L759-L763 but I would still tread carefully when attempting to do things like this.

[julien51]

@kpdecker The problem is pretty simple. We use <script type="text/x-handlebars">...</script>to define our templates. Adding a <script src="https://gist.github.com/4332573.js"/></script> in the content will confuse handlebar because it will assume the end of the template is at the end of the gist... not where it actually ends.

I'll try the compile option, if that's the only option, but that seems a bit like an overkill:/

[kpdecker]

Precompiling is generally recommended as it can provide performance benefits (at the expense of requiring a build step). This is a total hack but you might be able to do something like:

</sc{{undefined}}ipt>

To work around the HTML parser's behavior here, but that feels like a total hack.

[kpdecker]

On the handlebars language side we should look how how to escape content generically.

[julien51]

So, I eventually went with templates compilation... but that's still nto good, as it looks like, even though the <script> elements are included, they're not "executed" :/
Any idea?

[kpdecker]

If the script elements are in the DOM on final render but not executed then you may very well have to perform manual loading which is outside of the scope of handlebars. This is "here be dragons" from my experience on the subject (granted this was years ago)

[emirotin]

I though this could be solvable by a helper of such kind: http://codepen.io/emirotin/pen/rksCx
But for some reason the gist doesn't render

[kpdecker]

After thinking about this again, I think that this is a relatively uncommon use case. Rather than creating an additional language construct for this, I've added documentation to the FAQ section highlighting the ability to use a comment to break up this construct when used in an inline template and urging users to use precompiled templates when possible.

https://github.com/wycats/handlebars.js/blob/master/FAQ.md

[SeloSlav]

Can't you just escape the scripts like this? Probably not very secure though...

<script src="script1.js"><{{!}}/script>
<script src="script2.js"><{{!}}/script>

[letsrock85]

santafebound You are Genious!

[nknapp]

@letsrock85 may I recommend, that you precompile your templates? You avoid such problems altogehter and get a better performance.

[nevercast]

@nknapp Just to clarify, precompiling templates does not fix this. The script tag is embedded in the DOM, but it is not executed.

[nknapp]

@nevercast Handlebars just computes the string that contains the script.

What you do with the string is up to you. You can insert it into the DOM, but that does not execute the scripts. That is correct.

For solutions, see https://stackoverflow.com/questions/4619668/executing-script-inside-div-retrieved-by-ajax

[nevercast]

Thanks @nknapp, I ended up defining my own script type. <script type="text/x-after-hashchange"> and invoking those after handlebars had done its work. Which I believe is similar to the solutions you linked.