I'm using this library for image popups:

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=".png"><img style="width: 250px; height: 375px;" src=".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?

I'm using this library for image popups: http://finegoodsmarket./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./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./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?

• javascript
• html
• parse-platform
• collections
• handlebars.js

Share Improve this question Follow asked Feb 1, 2016 at 3:27 Martin ErlicMartin Erlic 5,6772626 gold badges9292 silver badges162162 bronze badges 4

• Is the script you're trying to inject dynamic somehow? If not, you can just put the <script> tag directly into the template. If it is dynamic, then you will need to either pass the script name to your handlebars render call or create a handlebars helper to get it. – jfriend00 Commented Feb 1, 2016 at 3:37
• I honestly wish I could provide a more specific answer. I'm not the most experienced developer, and simply purchased the library for a quick pop up solution. But it stills begs the question, in general I'd like to know how to include external scripts within the template. A lot of people are saying it's not really possible without prepiling the template, which I think is overkill: github./wycats/handlebars.js/issues/531 – Martin Erlic Commented Feb 1, 2016 at 3:50
• A template can contain a <script> tag just like it can contain any other HTML as long as the URL for the <script> tag is know when you create the template. – jfriend00 Commented Feb 1, 2016 at 3:55
• So how would you remend implementing that? Because including <script src="jquery.min.js"></script> <script src="view.min.js?auto"></script> in the template doesn't do anything. I've been told you can't just include scripts like that. – Martin Erlic Commented Feb 1, 2016 at 3:59

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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!