Handlebars - Courses

by echapman

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
<h2>Courses</h2>

<div id="courselist">Course list goes here...</div>
<div id="courselisttemplate" class="handlebars">
  <p>{{courses.length}} courses were found</p>
  <ul>
    {{#courses}}
    <li class="course">
      <span class="number">{{course_group}} {{num_int}}{{num_char}}</span>
      <br/>
      <span class="title">{{title}}</span> {{#if faculty_text}}
      <br/>
      <span class="faculty">{{faculty_text}}</span> {{/if}}
      <br/>
      <span class="meeting">{{meeting_text}}</span>
    </li>
    {{/courses}}
  </ul>
</div>

CSS

* {
  font-family: calibri, helvetica, sans-serif;
}

.handlebars {
  display: none;
}

li.course {
  padding-top: 0.5em;
}

.course .title {
  font-weight: bold;
}

.course .faculty {
  font-style: italic;
}

.course .meeting {
  font-size: smaller;
}

JavaScript

var courses_data_url = "https://cdn.rawgit.com/dpheitmeyer/a6db252e063cc2c2e781/raw/9d1c398ac8368dff572f37460589b4f7b3b598dd/courses.json";

$(document).ready(function() {
  $.getJSON(courses_data_url,
    function(data) {
      var mysource = $('#courselisttemplate').html();
      var mytemplate = Handlebars.compile(mysource);
      var myresult = mytemplate(data)
      $('#courselist').html(myresult);
    });
});