json data does not show on page, but does in console

I have a page that accesses a RESTful service on Node. In my callback, I do a console.log and can see all of the data I expect to see. And since it is an array, I can even see that I'm getting the number of rows I expect to see, and a row is rendered for every item in the json array. But no matter what I do, I don't see the data from the properties when I access them via handlebars.

the following code is accessing the service, and receiving the data.

<script id="post-template" type="text/x-handlebars-template">
    <div class="post">id {{id}} : info {{info}}</div>
</script>

<script>
$(document).ready(function(){
    var source   = $("#post-template").html();
    var template = Handlebars.compile(source);
    $.ajax({
      url: "/posts",
      dataType : "json",
      beforeSend: function( xhr ) {
        xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
      }
    })
      .done(function( posts ) {
        //posts = JSON.parse(posts);
        console.log( "Sample of data:", posts );
        for(var i= 0, len=posts.length; i< len; i++){
            var post = posts[i];
            //console.log(post);
            var html = template(post);
            $('div.content').append(html);

        }

      });


});
</script>

but it produces this html:

<div class="content">foo
    <div class="post">id  : info </div>

    <div class="post">id  : info </div>

    <div class="post">id  : info </div>

    <div class="post">id  : info </div>

    <div class="post">id  : info </div>

    <div class="post">id  : info </div>

    <div class="post">id  : info </div>

    <div class="post">id  : info </div>

    <div class="post">id  : info </div>

    <div class="post">id  : info </div>

    <div class="post">id  : info </div>

    <div class="post">id  : info </div>

    <div class="post">id  : info </div>

    <div class="post">id  : info </div>

    <div class="post">id  : info </div>

    <div class="post">id  : info </div>

    <div class="post">id  : info </div>

    <div class="post">id  : info </div>

    <div class="post">id  : info </div>

    <div class="post">id  : info </div>

    <div class="post">id  : info </div>

    <div class="post">id  : info </div>

    <div class="post">id  : info </div>

    <div class="post">id  : info </div>

    <div class="post">id  : info </div>

    <div class="post">id  : info </div>

    <div class="post">id  : info </div>

    <div class="post">id  : info </div>

    <div class="post">id  : info </div>

    <div class="post">id  : info </div>
</div>

I tried to reproduce the bug in this fiddle http://jsfiddle.net/dshahin/6Lfth09r/ but to my frustration, it works just fine in that context. Has anyone else seen this behavior? And do you have any ideas on how to fix it?