Download and compile external pen templates?

Question

I am trying to use Handlebars to power a block of stalls that shows local HTML files. These files use Javascript to retrieve remote content, and Handlebars controls the template / output.

What I want to do is keep the Handlebars templates in my own directory and, when interacting with buttons (links), insert these templates on the page and then fill in the content using the AJAX response.

Everything works for me, except for the template output:

Link example:

<a href="#" onclick="Kiosk.history(); return false;">History</a></li> 

In application.js:

 history: function() { var source; Zepto.ajax({ url: 'templates/history.handlebars', dataType: 'html', cache: false, success: function(data, status, response) { source = data; var template = Handlebars.compile(response.responseText); var context = { title: 'Static Title (to be replaced)' }; $('#main-content').html(template(context)); } }); 

Descriptor File:

 <div class="row" id="history"> <div class="large-10 columns large-offset-1"> <script id="hb-history" type="text/x-handlebars-template"> <h2>{{ title }}</h2> {{ body }} </script>should have a template here </div> </div> 

It seems to me that something is missing because the # main-content div is never updated with a dynamic template, only the output should be a template here.

Answer 1

Oh, was right in front of me. The Script tag in the template is not needed.