Skip to content

Instantly share code, notes, and snippets.

@dpawluk

dpawluk/iframe.html

Created January 2, 2017 21:06
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save dpawluk/f536bacf53d471345543a4817b14152a to your computer and use it in GitHub Desktop.
Save dpawluk/f536bacf53d471345543a4817b14152a to your computer and use it in GitHub Desktop.
Download ZIP
Simple function to emulate v1 template switching using external hbs templates in the assets folder. Note: cdns used to acquire some common libraries.
Raw
iframe.html
<html>
<body>
<!-- https://github.com/zendesk/zendesk_app_framework_sdk -->
<script
type="text/javascript"
src="https://assets.zendesk.com/apps/sdk/2.0/zaf_sdk.js" >
</script>
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js" >
</script>
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js" >
</script>
<script>
// Initialise the Zendesk JavaScript API client
// https://developer.zendesk.com/apps/docs/apps-v2
var client = ZAFClient.init();
client.invoke('resize', { width: '100%', height: '400px' });
client.on('app.registered', function(){
var test_title = "This is a test title";
var viewData = {"title": test_title};
var templateUrl = "./template.hbs";
switchView(templateUrl, viewData);
});
function switchView(templateUrl, viewData){
var target = $("#view_container");
$(target).empty().html("<img class='spinner' src='spinner.gif' />");
$.ajax(templateUrl).done(function(data){
var template = Handlebars.compile(data);
var html_data = template(viewData);
console.log(html_data);
$(target).empty().html(html_data);
});
};
</script>
</body>
<div id="view_container">
<!--replace with handlebars templates-->
<p>This data should get replaced</p>
</div>
</html>
Raw
template.hbs
<div>
<h2>{{title}}</h2>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment