Injecting javascript files into Handlebars.js

Question

I'm using this library for image popups: http://finegoodsmarket.com/view

This is the typical structure. Set the link to class "view" and the href to the image you want to pop up. Pretty simple and works fine:

<a class="view" href="http://files.parsetfss.com/77c6003f-0d1b-4b55-b09c-16337b3a2eb8/tfss-af91222f-ca12-484d-8c68-14e836ce8a0f-8b159954-6dae-405d-8488-c16226d1903c_1.png"><img style="width: 250px; height: 375px;" src="http://files.parsetfss.com/77c6003f-0d1b-4b55-b09c-16337b3a2eb8/tfss-af91222f-ca12-484d-8c68-14e836ce8a0f-8b159954-6dae-405d-8488-c16226d1903c_1.png"></a>

All you have to do is include two scripts at the bottom of your page:

<script src="jquery.min.js"></script> 
<script src="view.min.js?auto"></script>

My problem is that because my page is set up with Handlebars.js for its templates, I can't include .js scripts that are accessible from actions which take place within those templates.

I have one template that is rendered as such:

  <script id="blogs-tpl" type="text/x-handlebars-template">
      {{#each blog}}
      <div class="col s12 m4">
        <div class="icon-block">

          <p><center><div class="fade-in one"><a class="view" href="{{image.url}}"><img style="width: 250px; height: 375px;" src="{{image.url}}"></a></div>
            <div><span class="typcn typcn-heart" style="color: red; font-size: 20px;"></span> {{likesCount}} &nbsp; <span class="typcn typcn-tags" style="color: #000; font-size: 20px;"></span> ${{price}}</div>
            <div>Designed by {{author.objectId}}</div><br>
            <a href="" id="download-button" class="btn-large waves-effect waves-light indigo darken-2">Details</a></center></p>
          </div>
        </div>
        {{/each}}
</script>

Since Handlebars.js is logicless, there is no way of injecting the two script tags into the template itself, so the result is that the popup simply doesn't work, even though it works like a charm on the rest of the site.

How can I go about including those two scripts "inside" the template so that the image links register the pop up? Cheers. Any thoughts?

Answer 1

Figured it out. Needed to escape the script tags.

<script src="jquery.min.js"><{{!}}/script>
<script src="view.min.js?auto"><{{!}}/script>

Seems a little hacky but it works!