ajax - 无法弄清楚 Handlebars.js 是否没有编译模板，或者是否还有其他一些我没有看到的错误

Question

所以我使用带有 web api 的 asp.net mvc4。我正在尝试通过 ajax 获取 api 数据并使用 handlebars.js 将其放入模板中（据我所知，它与 mustache.js 相同）。我的 javascript 中没有出现错误，使用 fiddle 我可以看到 json 结果返回，但没有呈现任何内容。您可以在 www.nerdlythings.com/webapplication/onus 查看实时页面。

所有代码都位于 cshtml 文件中，如下所示：

    @*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>
}