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> пункт </p>) или

• забывает процитировать значение атрибута (где символы, такие как «%» и «/», являются общими, но не могут появляться без окружающих котировок),

• или с использованием самозакрывающихся тегов в стиле XHTML (например,) в HTML 4.01 или более ранних версиях. Чтобы исправить, удалите символ дополнительной косой черты ('/'). Дополнительные сведения о причинах этого см. В разделе Пустые элементы в SGML, HTML, XML и XHTML.

Answer 3

Я уверен, что это имеет отношение к недействительному HTML.

Единственные прямые дочерние элементы, которые могут иметь теги <tbody>, - это <tr> элементы. {{#people}} не является тегом <tr> и, следовательно, не является допустимым дочерним. Пожалуйста, обратитесь к W3 definition для тега <tbody>.

Я бы предположил, что ваш браузер исправляет HTML при рендеринге страницы, а jQuery возвращает именно то, что представлено в вашей структуре DOM (которая отличается от просмотра источника). Это обычная функция браузеров для исправления HTML для отсутствующих тегов или других распространенных ошибок, чтобы попытаться исправить структуру HTML.