jQuery 返回错误的 HTML

Question

问题：jQuery返回错误的HTML值
jQuery版本：jquery-1.10.2.min.js

由于某种原因，$("#peopleTemplate").html() 返回了错误的 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 返回以下内容。

        {{#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

您的模板 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/

Answer 2

实际上，您不应该知道您期望的回报，因为您的 HTML 完全无效。 <tbody> 元素中不能有文本。

{{#people}}

您在不允许出现的地方使用了字符数据。可能导致此错误的错误包括：

• 将文本直接放在文档正文中，而不将其包装在容器元素中（例如<p>Paragraph</p>），或者

• 忘记引用属性值（其中“%”和“/”等字符很常见，但不能在没有引号的情况下出现），

• 或 在 HTML 4.01 或更早版本中使用 XHTML 样式的自闭合标签（例如 ）。要解决此问题，请删除多余的斜杠 ('/') 字符。有关其原因的更多信息，请参阅 SGML、HTML、XML 和 XHTML 中的空元素。

Answer 3

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

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

我会假设您的浏览器在呈现页面时正在更正 HTML，并且 jQuery 准确地返回您的 DOM 结构中表示的内容（这与查看源代码不同）。这是浏览器的常见功能，可纠正 HTML 中缺少的标签，或尝试纠正 HTML 结构的其他常见错误。