Panini is incompatible with Handlebars

[johnellison]

I've been trying to use Handlebars inside my Zurb Foundation 6 Template with Gulp and Panini, but it seems like Panini is stripping out the Handlebars template tags from my HTML.

Here's my markup:

<script id="project-template" type="text/x-handlebars-template">
      <article class="project-tile well" data-id="{{id}}" data-category="{{category}}">
        <h3><a href="#">{{name}}</a></h3>
        <p class="lead">{{category}}</p>

        <p>{{problemStatement}}</p>
        <p>{{solutionStatement}}</p>

        <p><span class="fa fa-map-o"></span> {{location}}</p>
        <p><span class="fa fa-link"></span> <a href="{{url}}">Website</a></p>
        {{#if needsVolunteers}}<p><span class="fa fa-users"></span> currently looking for volunteers</p>{{/if}}

        <ul class="list-inline">
            {{#if facebookUrl}}<li><a href="{{facebookUrl}}"><i class="fa fa-2x fa-facebook-square"></i></a></li>{{/if}}
            {{#if linkedinUrl}}<li><a href="{{linkedinUrl}}"><i class="fa fa-2x fa-linkedin-square"></i></a></li>{{/if}}
            {{#if twitterUrl}}<li><a href="{{twitterUrl}}"><i class="fa fa-2x fa-twitter-square"></i></a></li>{{/if}}
        </ul>
      </article>
    </script>

and my Javascript:

  var source   = $("#project-template").html();
  console.log(source);
  var template = Handlebars.compile(source);

  for(project of data) {
    var html = template(project);
    $("#project-list").append(html);
  }

I am expecting to receive a list of projects from my dataset based upon the template provided, but instead I receive the markup with all of the Handlebars tags ripped out:

<article class="project-tile well" data-id="" data-category="" style="position: absolute; left: 0px; top: 0px;">
  <h3><a href="#"></a></h3>
  <p class="lead"></p>

  <p></p>
  <p></p>

  <p><span class="fa fa-map-o"></span> </p>
  <p><span class="fa fa-link"></span> <a href="">Website</a></p>

  <ul class="list-inline">
  </ul>
</article>

I'd like to use Handlebars and Panini together but it seems like it's incompatible. When I run the exact same markup with the exact same script outside of a Zurb Template, everything works fine...

Any help with this would be greatly appreciated!

[gakimball]

Panini is a Handlebars compiler, so it's going to try and parse that stuff itself instead of letting it pass through to the client.

To get around this, you can write a "raw" Handlebars helper that skips compiling of everything inside of it.

In the ZURB Template, create the file src/helpers/raw.js:

module.exports = function(content) {
  return content.fn();
}

Then call the helper with four braces and no #:

{{{{raw}}}}
Nothing inside here will be parsed in the build process.
{{{{/raw}}}}

[johnellison]

Just what I needed. Thanks @gakimball

[eMerzh]

i've juste used this trick for smth ...
but it seems that it still quote my raw script ...

{{{{raw}}}}{{ url_for('static', filename='file')  }}{{{{/raw}}}}

is translated to :

{{ url_for('static', filename='file')  }}

[yelrug]

I'm new to Foundation 6 and Handlebars. So please forgive my ignorance. This post is the closest I've seen to what I'm looking for.
 
Anytime I try to run a "handlebars.compile()"  when trying to send data to my page templates via an AJAX request I am receiving a "handlebars not defined."

How are you including handlebars in your foundation 6? I've tried several different methods via import directly into app.js or through a dependancies.js and I end up with compile errors.

UPDATE:
This thread was very helpful. I got it working.
handlebars-lang/handlebars.js#1174