Handlebars templating, lodash collection manipulation. moment date manipulation.

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script data-require="handlebars.js@*" data-semver="1.3.0" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js"></script>
    <script data-require="lodash.js@*" data-semver="3.8.0" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.8.0/lodash.js"></script>
    <script data-require="moment.js@*" data-semver="2.10.2" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="container">
     <h1>Product Comments</h1>
     <p>The following comments are displayed using a tmeplate. If the comment has replies,
     you will see them, otherwise you won't.</p>
            <hr />
   
      <div id="target"></div>
    </div>
   
    <script id="comment-template" type="text/x-handlebars-template">
      {{#each comments}}
        <div class="panel panel-default">
          <div class="panel-heading">
            <span class="text-muted pull-right">{{datetime}}</span><h3 class="panel-title">{{title}}</h3>
          </div>
          <div class="panel-body">
          <p class="text-muted">Replies:
          {{#if replies}}
            {{replies.length}}
          {{else}}
            0
          {{/if}}
          </p>
            {{#each replies}}
              <span class="pull-right">{{datetime}}</span><h5>{{title}}</h5>
            {{/each}}
          </div>
        </div>
      {{/each}}
    </script>
    <script src="script.js"></script>
  </body>

</html>

var commentCollection = {
  comments: [{
    title: 'Comment One Title',
    replies: [],
    date: 1433345029812
  }, {
    title: 'Comment Two Title',
    replies: [{
      title: 'Reply one',
      date: 1433356029812
    }, {
      title: 'Reply two',
      date: 1433356042426
    }, {
      title: 'Reply three',
      date: 1433356052885
    }],
    date: 1433344029812
  }, {
    title: 'Comment Three Title',
    replies: [],
    date: 1433235029812
  }]
}



var loadComments = function() {
  _.forEach(commentCollection.comments, function(comment) {
    comment.datetime = moment(comment.date).fromNow();
    _.forEach(comment.replies, function(reply) {
      reply.datetime = moment(reply.date).fromNow();
    });
  });

  var sourceTemplate = document.getElementById("comment-template").innerHTML;
  var builtTemplate = Handlebars.compile(sourceTemplate);
  var complied_output = builtTemplate(commentCollection);

  document.getElementById("target").innerHTML = complied_output;

}







window.onload = function() {

  loadComments();
};

/* Styles go here */