jQuery returns 错了 HTML

Question

问题: jQuery returns 错误 HTML 值
jQuery 版本: jquery-1.10.2.min.js

由于某些原因$("#peopleTemplate").html() returns 错误HTML。

而不是返回

<table>
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
        </tr>
    </thead>
    <tbody>
        {{#people}}
        <tr>
            <td>{{FirstName}}</td>
            <td>{{LastName}}</td>
        </tr>
        {{/people}}
    </tbody>
</table>

, jQuery returns 以下.

        {{#people}}

        {{/people}}
    <table>
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>

        </tr>
    </thead>
    <tbody><tr>
            <td>{{FirstName}}</td>
            <td>{{LastName}}</td>

        </tr></tbody>
</table>

我缺少什么？

这是相关的完整来源。

@using Demo.Javascript.Template.Hogan.Models
@model List<Person>

@{
    ViewBag.Title = "People";
}

<h2>People</h2>

<div id="peopleTemplate" class="template">
    <table>
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
            </tr>
        </thead>
        <tbody>
            {{#people}}
            <tr>
                <td>{{FirstName}}</td>
                <td>{{LastName}}</td>
            </tr>
            {{/people}}
        </tbody>
    </table>
</div>

<div id="main"></div>

<script language="javascript">
    debugger;
    //var data = { "people" : @Html.Raw(Json.Encode(@Model)) };
    var data = {
        "people": [
            { "FirstName": "John", "LastName": "Doe" },
            { "FirstName": "Jane", "LastName": "Doe" },
            { "FirstName": "Robert", "LastName": "Smith" },
            { "FirstName": "Mike", "LastName": "Durden" },
            { "FirstName": "Marilin", "LastName": "Monroe" }
        ]
    };
    var template = Hogan.compile($("#peopleTemplate").html());
    var rendered = template.render(data);
    $("#main").html(rendered);
</script>

Answer 1

其实你期待的return不应该知道，因为你的HTML是完全无效的。 <tbody> 元素中不能包含文本。

{{#people}}

You have used character data somewhere it is not permitted to appear. Mistakes that can cause this error include:

putting text directly in the body of the document without wrapping it in a container element (such as a <p>Paragraph</p>), or

forgetting to quote an attribute value (where characters such as "%" and "/" are common, but cannot appear without surrounding quotes),

or using XHTML-style self-closing tags (such as ) in HTML 4.01 or earlier. To fix, remove the extra slash ('/') character. For more information about the reasons for this, see Empty elements in SGML, HTML, XML, and XHTML.

Answer 2

我很确定这与无效 HTML 有关。

<tbody> 标签允许的唯一直接子元素是 <tr> 元素。 {{#people}} 不是 <tr> 标签，因此不是有效的子标签。请为 <tbody> 标签引用 W3 definition。

我假设您的浏览器在呈现页面时正在更正 HTML，并且 jQuery 返回的正是您的 DOM 结构中所代表的内容（不同于查看来源）。这是浏览器纠正 HTML 缺失标签的一个常见功能，或者其他试图纠正 HTML 结构的常见错误。

Answer 3

您的模板 HTML 无效，请尝试用 <script> 标签包装您的模板，如下所示：

<script id="peopleTemplate" type="text/html">
    <div class="template">
        <table>
            <thead>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                </tr>
            </thead>
            <tbody>
                {{#people}}
                <tr>
                    <td>{{FirstName}}</td>
                    <td>{{LastName}}</td>
                </tr>
                {{/people}}
            </tbody>
        </table>
    </div>
</script>

工作版本：http://jsfiddle.net/fcbwh1wp/

jQuery returns 错了 HTML

jQuery returns wrong HTML

jquery

asp.net-mvc

hogan.js