Ajax 无法确定Handlebar.js是否未编译模板，或者是否存在其他我未看到的错误

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

所有代码都位于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>
}

@*呈现的HTML*@
@*列表视图模板获取*@
制造责任

{{{#各有责任}

{{Title}}



{{/每个}}

@*详细信息模板获取（1）*@
{{Title}}{{Status}}

{{Description}
{{Details}
{{#如果重复}
{{R_区间}}

{{R_StartDate}

{{R_EndDate}}

{{/if}
{{#如果基于日期}
{{D_DateDue}}

{{/if}
编辑
删除
@*创建/更新模板发布/发布*@

标题：


说明：


细节：


重复性任务


基于日期的任务


开始日期：


开始日期：

选择休息时间

每日的


周报


日期


天数



到期日：

@节脚本{
var onusServer=（函数（）{
var onusApiUrl='@Url.RouteUrl（“DefaultApi”，new{httproute=“”，controller=“onus”}）；
$（文档）.ajaxError（函数（事件，xhr）{
警报（xhr.status+”：“+xhr.statusText）；
});
//**呼叫控制器**//
var getOnuses=函数（）{
返回$.ajax（onusApiUrl）
};
var getOnus=函数（id）{
返回$.ajax（onusApiUrl+“/”+id）
};
var updateOnus=函数（ONU）{
返回$.ajax（onusApiUrl+“/”+onus.Id{
键入：“放置”，
数据：责任
});
};
var addOnus=函数（onus）{
返回$.ajax（onusApiUrl{
类型：“POST”，
数据：责任
});
};
var deleteOnus=函数（id）{
返回$.ajax（onusApiUrl+“/”+id{
类型：“删除”
});
};
返回{
getOnuses:getOnuses，
格托努斯：格托努斯，
UpdateNous:UpdateNous，
阿多努斯：阿多努斯，
deleteOnus:deleteOnus
};
}());
（功能（）{
var模板={}；
var compileTemplates=函数（）{
var source=$（“#list”）.html（）；
templates.onusList=handlebar.compile（源代码）；
templates.onusDetails=handlebar.compile（$（“#详细信息”）.html（）；2
templates.onusCreate=handlebar.compile（$（“#Create”）.html（）；
};
var getAllOnuses=函数（）{
onusServer.getOnuses（）.done（showAllOnuses）；
};
var editOnus=函数（）{
var id=getId（这个）；
onusServer.getOnus（id）.done（showonsfordit）
};
var saveOnus=函数（）{
风险责任={
“Id”：$（“#Id”）.val（），
“标题”：$（“#标题”）.val（），
“说明”：$（“#desc”）.val（），
“详细信息”：$（“#详细信息”）.val（），
“经常性”：$（“#经常性”）.val（）
};
var操作；
if（onus.Id！=“0”）{//if zero假设它是一个POST
operation=onusServer.updatenous（onus）；
}否则{
操作=onusServer.addOnus（onus）；
}
操作完成（getAllOnuses，clearEdit）；
返回false；
};
var createOnus=函数（）{
var onus={Id:0，Title:，Length:0}；
showonsfordit（onus）；
};
var deleteOnus=函数（）{
var id=getId（这个）；
onusServer.deleteOnus（id）.done（getAllOnuses）；
};
var showAllOnuses=函数（数据）{
var output=templates.onusList（{onus:data}）；
$（“#列表输出”）.html（输出）；
};
var showonsfordit=功能（ONU）{
var output=templates.onusCreate（onus）；
$（“#CreateOutput”）.html（输出）；
};
var wirelevents=函数（）{
$（document）.on（“click”、“.editOnus”、editOnus）；
$（文档）。在（“单击”，“保存”，保存）；
$（文档）。在（“单击“，”createOnus“，createOnus”）上；