template.html

<script src="js/handlebars.min.js"></script>
<script id="search-results-template" type="text/x-handlebars-template">
  <div class="container-fluid">
    <div class="row num-results-container">
      <div class="num-results col-xs-6 text-left">
        <span class="pre">{{numPosts}} {{#pluralize "result" numPosts}}{{/pluralize}}  |  </span>
        <a href="https://{{#if oldReddit}}old.{{/if}}reddit.com/submit?url={{url}}
        {{#if numPosts}}
          &resubmit=true">repost to Reddit
        {{else}}
          ">post to Reddit
        {{/if}}
        <span class="glyphicon glyphicon-share-alt"></span></a>
      </div>
      <div class="col-xs-6">
        <span class="pull-right">
          <a class="sort-order btn btn-xs btn-link">
            <span class="glyphicon glyphicon-sort"></span>
          </a>
        </span>
        <span class="pull-right" style="margin-right: 5px;">
          <span class="pre">sort  </span>
          <select class="sort-options">
            {{#selected orderBy}}
              <option class="sort-option" value="score">score</option>
              <option class="sort-option" value="comments">comments</option>
              <option class="sort-option" value="age">age</option>
              <option class="sort-option" value="subreddit">subreddit</option>
            {{/selected}}
          </select>
        </span>
      </div>
    </div>
    <div class="row container-fluid list-container">
      <table id="list" class="table">
        {{#each posts}}
          <tr class="row">
            <td class="col-md-2 score">
              {{data.score}}
            </td>
            <td class="col-md-8 title">
                <span>
                  <a href="https://{{#if ../oldReddit}}old.{{/if}}reddit.com{{data.permalink}}">
                    <span class="post-title">{{data.title}}</span>
                  </a>
                  <br/>
                  <a href="https://{{#if ../oldReddit}}old.{{/if}}reddit.com{{data.permalink}}">
                    <span class="num-comments">
                      {{data.num_comments}} {{#pluralize "comment" data.num_comments}}{{/pluralize}}
                    </span>
                  </a> | 
                  <small class="post-details">
                    submitted {{data.age}} ago by 
                    <a class="pop" href="https://{{#if ../oldReddit}}old.{{/if}}reddit.com/u/{{data.author}}">/u/{{data.author}}</a>
                  </small>
                  <br/>
                </span>
            </td>
            <td class="col-md-2 subreddit">
              <a href="https://{{#if ../oldReddit}}old.{{/if}}reddit.com/r/{{data.subreddit}}">/r/{{data.subreddit}}</a>
            </td>
          </tr>
        {{/each}}
      </table>
    </div>
  </div>
</script>

<script src="js/jquery.min.js"></script>
<script>
  Handlebars.registerHelper('selected', function(val, options) {
    let div = $('<div>').html(options.fn(this));
    div.find(`[value=${val}]`).attr('selected', true);
    return div.html();
  });

  Handlebars.registerHelper('pluralize', function(str, n) {
    return `${str}${n != 1 ? 's' : ''}`;
  });

  let template = Handlebars.compile($('#search-results-template').html());
  window.addEventListener('message', evt => {
    evt.source.postMessage(
      { html: template(evt.data.context) },
      evt.origin
    );
  });
</script>