Skip to content

Instantly share code, notes, and snippets.

@pjsier

pjsier/client-templating.html

Last active July 3, 2016 23:53
Show Gist options
  • Save pjsier/eddfc955d89b8a5e423b3900e1e44a95 to your computer and use it in GitHub Desktop.
Save pjsier/eddfc955d89b8a5e423b3900e1e44a95 to your computer and use it in GitHub Desktop.
Download ZIP
Example of using Handlebars and search parameter for an entirely client-side templating layout
Raw
client-templating.html
<!DOCTYPE html>
<html>
<head>
<title>Client-Side Templating Example</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
</head>
<body>
<div id="content"></div>
<script id="detail-template" type="text/x-handlebars-template">
<h1>Test with an example nursing home ID from <a href="https://data.medicare.gov/Nursing-Home-Compare/Provider-Info/4pq5-n9py">Medicare's nursing home ratings.</a></h1>
<h2>Try <a href="?145888">145888</a></h2>
<h2>ID: {{federal_provider_number}}</h2>
<h2>{{provider_name}}</h2>
<h3>{{provider_city}}, {{provider_state}}</h3>
</script>
</body>
<script type="text/javascript">
$(document).ready(function() {
// Get provider_id from URL parameter, query for it in API
// URL format is example.com?145888, 145888 is the parameter passed
var provider_id = window.location.search.replace(/^\?/, "");
var query_string = "https://data.medicare.gov/resource/4pq5-n9py.json?$where=" +
"federal_provider_number='" + provider_id + "'";
$.ajax({
url: query_string,
dataType: "json",
success: function(response) {
handleQuery(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);
$('#content').html(result);
}
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment