Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Panini is incompatible with Handlebars #32

Closed
johnellison opened this issue Jan 30, 2016 · 4 comments

Comments

@johnellison
Copy link

commented Jan 30, 2016

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

This comment has been minimized.

Copy link
Contributor

commented Jan 31, 2016

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

@gakimball gakimball closed this Jan 31, 2016

@johnellison

This comment has been minimized.

Copy link
Author

commented Feb 2, 2016

Just what I needed. Thanks @gakimball

@eMerzh

This comment has been minimized.

Copy link

commented May 14, 2016

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(&apos;static&apos;, filename=&apos;file&apos;)  }}
@yelrug

This comment has been minimized.

Copy link

commented Feb 28, 2018

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.
wycats/handlebars.js#1174

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.