Cant figure out if Handlebars.js not compiling template, or if there is some other error I am not seeing
===

So I am using asp.net mvc4 with web api. I am trying to fetch the api data via ajax and throw it in a template using handlebars.js (from what I am told it is the same as mustache.js). I am not getting an errors in my javascript, and using fiddle I can see the json result come back, but NOTHING is getting rendered. You can see the live page at www.nerdlythings.com/webapplication/onus.

All the code is sitting in the cshtml file like so:


        @*Rendered HTML*@
    <section id="master">
        <section id="ListOutPut"></section>
        <section id="right">
            <section id="DetailsOutput"></section>
            <section id="CreateOutput"></section>
        </section>
    </section>


    @*List View Template GET*@
    <script id="list" type="text/html">
        <div id="onuses">
            <button id="createOnus">Create Onus</button>
            <ul>
                {{#each onus}}
                <li>
                    <a>
                        <div class="onus" id="{{Id}}">
                            <p><span class="onusTitle">{{Title}}</span><span class="onusStatus"></span></p>
                            <p class="onusDescription"></p>
                        </div>
                    </a>
                </li>
                {{/each}}
            </ul>
        </div>
    </script>


    @*Details Template GET(1)*@
    <script id="Details" type="text/html">
        <section id="onusDetails" data-id="{{Id}}">
            <p><span class="onusTitle">{{Title}}</span><span class="onusStatus">{{Status}}</span></p>
            <p class="onusDescription">{{Description}}</p>
            <p class="onusDetails">{{Details}}</p>
            {{#if Recurring}}
                    <section id="recurringDetails">
                        <p>{{R_Interval}}</p>
                        <p>{{R_StartDate}}</p>
                        <p>{{R_EndDate}}</p>
                    </section>
            {{/if}}
                {{#if DateBased}}
                    <section id="dateBased">
                        <p>{{D_DateDue}}</p>
                    </section>
            {{/if}}
            <button class="editOnus">Edit</button>
            <button class="deleteOnus">Delete</button>
        </section>
    </script>


    @*Create/Update Template POST/PUT*@
    <script id="Create" type="text/html">
        <section id="onusCreate" data-id="{{Id}}">
            <form>
            <input type="hidden" name="id" id="id" value="{{Id}}" />
            <p>
                <label for="title">Title:</label><input type="text" name="Title" id="title" required value="{{Title}}" />
            </p>
            <p>
                <label for="desc">Description:</label><input type="text" name="Description" id="desc" required value="{{Description}}" />
            </p>
            <p>
                <label for="details">Details:</label><input type="text" name="Details" id="details" required value="{{Details}}" />
            </p>
            <p>
                <input type="radio" name="type" value="{{Recurring}}" id="recurring" checked />Recurring Task
            </p>
            <p>
                <input type="radio" name="type" value="DateBased" checked />Date Based Task
            </p>
            <section id="onusType">
                <p>
                    <label for="startDate">Start Date:</label><input type="date" value="{{R_StartDate}}" id="startDate" />
                </p>
                <p>
                    <label for="endDate">Start Date:</label><input type="date" value="{{R_EndDate}}" id="endDate" />
                </p>
                <section id="intervalPicker">
                    <label for="interval">Pick an Interval</label>
                    <p>
                        <input type="radio" name="interval" value="0" checked />Daily
                    </p>
                    <p>
                        <input type="radio" name="interval" value="1" checked />Weekly
                    </p>
                    <p>
                        <input type="radio" name="interval" value="2" checked />Date
                    </p>
                    <p>
                        <input type="radio" name="interval" value="3" checked />Number of days
                    </p>
                </section>
                <hr />
                <p>
                    <label for="dateDue">Due Date:</label><input type="date" value="{{D_DateDue}}" id="dateDue" />
                </p>
            </section>
            <input type="submit" id="saveOnus" />
            </form>
        </section>
    </script>


    @section scripts{
        <script src="~/Scripts/handlebars.js"></script>
        <script>
            var onusServer = (function () {
                var onusApiUrl = '@Url.RouteUrl("DefaultApi", new { httproute="", controller = "onus" })';
                $(document).ajaxError(function (event, xhr) {
                    alert(xhr.status + ":" + xhr.statusText);
                });


                //**Calling the controller**//
                var getOnuses = function () {
                    return $.ajax(onusApiUrl)
                };

                var getOnus = function (id) {
                    return $.ajax(onusApiUrl + "/" + id)
                };

                var updateOnus = function (onus) {
                    return $.ajax(onusApiUrl + "/" + onus.Id, {
                        type: "PUT",
                        data: onus
                    });
                };

                var addOnus = function (onus) {
                    return $.ajax(onusApiUrl, {
                        type: "POST",
                        data: onus
                    });
                };

                var deleteOnus = function (id) {
                    return $.ajax(onusApiUrl + "/" + id, {
                        type: "DELETE"
                    });
                };
                return {
                    getOnuses: getOnuses,
                    getOnus: getOnus,
                    updateOnus: updateOnus,
                    addOnus: addOnus,
                    deleteOnus: deleteOnus
                };
            }());

            (function () {
                var templates = {};

                var compileTemplates = function () {
                    var source = $("#list").html();
                    templates.onusList = Handlebars.compile(source);
                    templates.onusDetails = Handlebars.compile($("#Details").html());2
                    templates.onusCreate = Handlebars.compile($("#Create").html());
                };

                var getAllOnuses = function () {
                    onusServer.getOnuses().done(showAllOnuses);
                };

                var editOnus = function () {
                    var id = getId(this);
                    onusServer.getOnus(id).done(showOnusForEdit)
                };

                var saveOnus = function () {
                    var onus = {
                        "Id": $("#id").val(),
                        "Title": $("#title").val(),
                        "Description": $("#desc").val(),
                        "Details": $("#details").val(),
                        "Recurring": $("#recurring").val()
                    
                    };
                    var operation;
                    if (onus.Id != "0") { //if zero assumes it is a POST
                        operation = onusServer.updateOnus(onus);
                    } else {
                        operation = onusServer.addOnus(onus);
                    }
                    operation.done(getAllOnuses, clearEdit);
                    return false;
                };

                var createOnus = function () {
                    var onus = { Id: 0, Title: "", Length: 0 };
                    showOnusForEdit(onus);
                };

                var deleteOnus = function () {
                    var id = getId(this);
                    onusServer.deleteOnus(id).done(getAllOnuses);
                };

                var showAllOnuses = function (data) {
                    var output = templates.onusList({ onus: data });
                    $("#ListOutput").html(output);
                };

                var showOnusForEdit = function (onus) {
                    var output = templates.onusCreate(onus);
                    $("#CreateOutput").html(output);
                };

                var wireEvents = function () {
                    $(document).on("click", ".editOnus", editOnus);
                    $(document).on("click", "#saveOnus", saveOnus);
                    $(document).on("click", "#createOnus", createOnus);
                    $(document).on("click", ".deleteOnus", deleteOnus);
                };

                var getId = function (element) {
                    return $(element).parents("section").attr("data-id");
                };

                var clearEdit = function () {
                    $("#CreateOutput").empty();
                };
                $(function () {
                    wireEvents();
                    compileTemplates();
                    getAllOnuses();
                });
            }());
        </script>
    }