Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Example of using Handlebars and search parameter for an entirely client-side templating layout
<!DOCTYPE html>
<title>Client-Side Templating Example</title>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<div id="content"></div>
<script id="detail-template" type="text/x-handlebars-template">
<h1>Test with an example nursing home ID from <a href="">Medicare's nursing home ratings.</a></h1>
<h2>Try <a href="?145888">145888</a></h2>
<h2>ID: {{federal_provider_number}}</h2>
<h3>{{provider_city}}, {{provider_state}}</h3>
<script type="text/javascript">
$(document).ready(function() {
// Get provider_id from URL parameter, query for it in API
// URL format is, 145888 is the parameter passed
var provider_id =^\?/, "");
var query_string = "$where=" +
"federal_provider_number='" + provider_id + "'";
url: query_string,
dataType: "json",
success: function(response) {
function handleQuery(response) {
provider = response[0];
// Get template from script in page
var template = $('#detail-template').html();
var compiledTemplate = Handlebars.compile(template);
var result = compiledTemplate(provider);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.