Data from API

[procload]

I'm having trouble finding an example of loading in data from an API into a partial. When I try to do it through Handlebars in my Javascript file using:

  var handleData = function(data) {
    var source = $("#content-template").html();
    var template = Handlebars.compile(source);
    var html = template(data);
    $(".my-content").html(html);
  };

it seems to be interfering with Panini's Handlebars implementation. I am receiving an array of 100 elements, but only the first 3 are shown and they do not contain any data. I am loading Handlebars into my layout file as well:

<script src="javascripts/handlebars-v4.0.10.js"></script>

Is there a way to load data from a service into a partial in Panini? Is Panini's Handlebars conflicting with my own implementation?

[gakimball]

Most likely your Handlebars template code is conflicting. Panini's Handlebars parser is going to process all the Handlebars code in your HTML it can find, even if you intend for some of it to be for the browser specifically. It doesn't know the difference.

However, there are ways to escape Handlebars code, so Panini's parser will ignore it.

To escape one expression:

<div id="content-template">
  \{{ escaped }}
</div>

In the final HTML you'll see:

<div id="content-template">
  {{ escaped }}
</div>

You can also escape large chunks of Handlebars with {{{{ raw }}}}.

{{{{raw}}}}
<div id="content-template">
  <!-- ... -->
</div>
{{{{/raw}}}}

Here are the official Handlebars docs on escaping. Let me know if that helps!

[procload]

That worked great, thanks!