Handlebars - Courses

by Ken Sprague

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}}
            {{#if faculty_text}}
            <br/>
            <span class="meeting">{{meeting_text}}</span>
            {{/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; color: red; }
.course .meeting {font-size: smaller; color: blue; }

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);
  });
});