Hi,
I have the following code for a potential handlbars.js tmpl. It compiles correctly at tryhandlebarsjs.com however when I attempt to open the file independently in a browser the default text in the div is the only thing that renders. I know my .json call is wrong but I cannot figure out where.
Thanks for any help.
<div id="handlebarsTmplPlaceholder">Will be replaced with handlebars.js.</div>
<!-- Start of bare bones handlebars.js tmpl -->
<script id="handlebars-Template" type="text/x-handlebars-template>
<div id="entry">
{{#if image_url}}
<figure id="figure1"><img src="{{image_url}}"></figure>
<figcaption>{{caption}}</figcaption>
{{/if}}
{{#if title}}<h1>{{title}}</h1>{{/if}}
{{#if subtitle}}<h2>{{subtitle}}</h2>{{/if}}
{{#if article}}<article id="article1">{{article}}</article>{{/if}}
{{#if aside}}<aside id="aside1">{{aside}}</aside>{{/if}}
<button id="readMore"><a id="readMoreButton" href="http://www.fleetwoodmax.com">read more</a></button>
</div>
<!-- div id="result"></div> -->
</script>
<!-- First attempt at accessing json data -->
<!--<script type="text/javascript">
$(document).ready(function () {
document.addEventListener("DOMContentLoaded", function() {
//Get the contents from the script block
var source = document.querySelector("#handlebars-Template").innerHTML;
//Compile into a template
template = Handlebars.compile(source);
document.querySelector("#readMoreButton").addEventListener("click", function() {
var rmore = document.querySelector("#readMoreButton").value;
var html = template({"#readMoreButton": "#"});
document.querySelector("#result").innerHTML = html;
});
});
});
</script>-->
<script type="text/javascript">
//<![CDATA[
var xhr;
function init() {
xhr = new XMLHttpRequest();
xhr.onreadystatechange = xhr_onReadyStateChangeHandler;
xhr.open("GET", "data.json");
xhr.send(null);
}
function xhr_onReadyStateChangeHandler(evt) {
if ((xhr.readyState === 4) && (xhr.status === 200)) {
var src = document.getElementById("handlebars-Template").innerHTML;
var tmpl = Handlebars.compile(src);
var json = JSON.parse(xhr.responseText);
document.getElementById("handlebarsTmplPlaceholder").innerHTML = tmpl(json);
}
}
//]]>
</script>