将 javascript 个文件注入 Handlebars.js

Question

我将这个库用于图像弹出窗口：http://finegoodsmarket.com/view

这是典型的结构。将 link 设置为 class "view" 并将 href 设置为您要弹出的图像。非常简单并且工作正常：

<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>

您所要做的就是在页面底部添加两个脚本：

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

我的问题是因为我的页面设置了Handlebars.js作为它的模板，我不能包含可以从采取的行动访问的.js脚本放置在这些模板中。

我有一个这样呈现的模板：

  <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>

由于 Handlebars.js 是无逻辑的，无法将这两个脚本标签注入模板本身，因此结果是弹出窗口根本不起作用，即使它在网站的其余部分。

我怎样才能将这两个脚本 "inside" 包含在模板中，以便图像 link 注册弹出窗口？干杯。有什么想法吗？

Answer 1

想通了。需要转义脚本标签。

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

看起来有点老套，但确实有效！

将 javascript 个文件注入 Handlebars.js

Injecting javascript files into Handlebars.js

html

javascript

collections

handlebars.js

parse-platform