问题: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>
答案 0 :(得分:2)
您的模板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>
答案 1 :(得分:1)
实际上,您所期望的回报不应该被人知道,因为您的HTML完全无效。您不能在<tbody>
元素中包含文字。
{{#人们}}
您在不允许出现的地方使用过字符数据。可能导致此错误的错误包括:
- 中
将文本直接放在文档正文中,而不将其包装在容器元素(例如
<p>
段</p>
)或忘记引用属性值(其中&#34;%&#34;和#34; /&#34;等字符很常见,但不能在没有引号的情况下出现),
或 在HTML 4.01或更早版本中使用XHTML样式的自关闭标记(例如)。要修复此问题,请删除额外的斜杠(&#39; /&#39;)字符。有关其原因的更多信息,请参阅SGML,HTML,XML和XHTML中的空元素。
答案 2 :(得分:1)
我很确定这与无效的HTML有关。
<tbody>
标记允许拥有的唯一直接子元素是<tr>
个元素。 {{#people}}
不是<tr>
标记,因此不是有效的子标记。请参考<tbody>
代码的W3 definition。
我认为您的浏览器在呈现页面时正在更正HTML,并且jQuery正在返回您的DOM结构中显示的内容(这与查看源代码不同)。这是浏览器的一个常见功能,用于纠正缺失标记的HTML或其他常见错误,以尝试更正HTML结构。