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>元素中包含文字。

{{＃人们}}

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



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

中

忘记引用属性值（其中＆＃34;％＆＃34;和＃34; /＆＃34;等字符很常见，但不能在没有引号的情况下出现），



或   在HTML 4.01或更早版本中使用XHTML样式的自关闭标记（例如）。要修复此问题，请删除额外的斜杠（＆＃39; /＆＃39;）字符。有关其原因的更多信息，请参阅SGML，HTML，XML和XHTML中的空元素。

Answer 3

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

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

我认为您的浏览器在呈现页面时正在更正HTML，并且jQuery正在返回您的DOM结构中显示的内容（这与查看源代码不同）。这是浏览器的一个常见功能，用于纠正缺失标记的HTML或其他常见错误，以尝试更正HTML结构。

jQuery返回错误的HTML

3 个答案: