Handlebars - Courses

by mtzara

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}}</span>
      <br/>
      <span class="title">{{title}}</span>
      <br/> {{#if faculty_text}}
      <span class="faculty">{{faculty_text}}</span>
      <br/> {{/if}} {{#if meeting_text}}
      <span class="meeting">{{meeting_text}}</span>
      <br/> {{/if}}
    </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);
  });
});