client-side template

config.js

var TN = TN || {};

TN.config = TN.config || {};

TN.config.list = TN.config.list || {};
TN.config.list.dropdown = TN.config.list.dropdown || {};

TN.config.list.dropdown['example-dropdown'] = {
  template: "<% _(data.content).forEach(function(row) { <li><a class=\"media media--small\" href=\"#\"><div class=\"media__image leader--small\"><span class=\"img--icon img--medium\"><img src=\"<%= row.image.url %>\" width=\"<%= row.image.width %>\" height=\"<%= row.image.height %>\" alt=\"<%= row.image.alt %>\"></span></div><div class=\"media__body\"><div class=\"text-truncate\"><strong><%= row.payer %></strong></div><div class=\"text-truncate\"><%= row.accname %></div><div class=\"text-truncate\"><%= row.accnum %></div></div></a></li> }); %>",
  ajaxurl: '@Model.AjaxUrl',
  pageAction: 'append',
  pageText: 'Show more',
  startPage: 1,
  rowsPerPage: 5
};

template.html

<script type="text/template" id="template_example">
  <% _(accounts).forEach(function(row) { %>
    <li>
      <a class="media media--small" href="#">
        <div class="media__image leader--small">
          <span class="img--icon img--medium">
            <img src="<%= row.image.url %>" width="<%= row.image.width %>" height="<%= row.image.height %>" alt="<%= row.image.alt %>">
            </span>
          </div>
          <div class="media__body">
            <div class="text-truncate"><strong><%= row.payer %></strong></div>
            <div class="text-truncate"><%= row.accname %></div>
            <div class="text-truncate"><%= row.accnum %></div>
          </div>
        </a>
      </li> 
    <% }); %>
</script>