Using Handlebars Template To Repeat Content

http://stackoverflow.com/questions/25513093/json-data-does-not-show-on-page-but-does-in-console

by Scott Divelbiss

HTML

<script src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=places"></script>
<div class="content">foo</div>
<script id="post-template" type="text/x-handlebars-template">
    <div class="post">id {{id}} => info {{info}}</div>
</script>

JavaScript

(function($){
    var source   = $("#post-template").html();
    var template = Handlebars.compile(source);
    
    $.ajax({
        type: "POST",
        url: "/echo/json/",
        dataType : "json",
        data: {json: $.toJSON([ // data to be echo-ed back
                    {'id': '1', 'info': 'some text 1'}, 
                    {'id': '2', 'info': 'some text 2'},
                    {'id': '3', 'info': 'some text 3'}
        ])},
        beforeSend: function(xhr) {
            xhr.overrideMimeType("text/plain ; charset=x-user-defined");
        }
    })
    .done(function(response) {
        for(var index in response){
            var html = template(response[index]);
              $('div.content').append(html);
        }
    });
})(jQuery);