Handlebar Template not working with Ajax

[rutanshuj]

I have exactly implemented what has been mentioned in the documentation based on Templating and Expressions. I had Ajax with my own data in the success function however that did not work hence I decided to add the dummy data posted in the documentation. However, that also did not work.

As you can see below in the console.log(html) , the console displays the same html as the template without any context data.

index.hbs

<script id="entry-template" type="text/x-handlebars-template">
    <div class="entry">
        <h1>{{title}}</h1>
        <div class="body">
            {{body}}
        </div>
    </div>
</script>

<script>
......
$.ajax({
            .......
            success: function(data){
                var source   =  document.getElementById("entry-template").innerHTML;
                var template = Handlebars.compile(source);
                var context = {title: "My New Post", body: "This is my first post!"};
                var html    = template(context);
                console.log(html); //This returns the html as it is without any changes to the initial template
                }
});
</script>

console.log(html) Output

    <div class="entry">
        <h1></h1>
        <div class="body">
            
        </div>
    </div>

I don't understand where I am going wrong as it has been implemented as mentioned.