Ручки не заполняют таблицу

Ответ 1

Убедитесь, что вы выставляете свой шаблон в теге, чтобы браузер не пытался его разобрать.

<script type="x-template" id="the-tpl">
    {{#if users}}
        <table>
            {{#each users}}
                <tr>
                    <td>{{username}}</td>
                    <td>{{email}}</td>
                </tr>
            {{/each}}
        </table>
    {{else}}
        <h3>No users found!</h3>
    {{/if}}
</script>

Если в теге script нет атрибута type, то парсер HTML найдет ошибку и попытается ее решить. Из ваших сведений об ошибках действительно выглядит так, как будто это имеет место здесь.

Использование require

Как вы отметили, вы загружаете с помощью Require, а не загружаете свой шаблон с помощью text! плагин: require("text!path/to/template.html")

Чтобы быть еще более привлекательным, вы можете делегировать всю сборку рулей в плагин для загрузки шаблонов дескрипторов, поэтому шаблоны предварительно скомпилированы внутри вашей сборки - это вероятно, лучший.

В любом случае, ваша проблема заключается в том, что ваш шаблон обрабатывается парсером HTML и нарушает содержимое вашего шаблона. Убедитесь, что вы загрузили его как "текст" через XMLHttpRequest или с требованием или внутри тега script, который был правильно введен.

Ответ 2

Решение Simon является правильным, и проблема обсуждается в различных комментариях. Я просто кладу кусочки здесь.

поскольку @rescuecreative указал, что некоторые браузеры удаляют пустые теги <table>, когда html вставлен в DOM.

Случай здесь немного похож. Браузеры плохо себя ведут, когда видят недопустимую разметку. но в этом случае это не из-за отсутствия tr, td внутри таблицы. его из-за дополнительных строк до tr в таблице.

Ваша проблема начинается здесь.

var htmlSource = $(data).html();

любой механизм загрузки, который вы используете, вы вставляете шаблон в DOM перед его компиляцией с помощью рулей.

Это то, что происходит при добавлении нескомпилированного шаблона в DOM.

{{#if users}}  <!-- browser does not understand this and tries to print it as it is-->
<table>  <!-- browser sees the table tag and immediately looks for child TR, tbody, thead -->
    {{#each users}}  <!-- but instead finds plain text and hence considers it as invalid markup -->
        <tr>   <!-- the same story is repeated again>
            <td>{{username}}</td>
            <td>{{email}}</td>
        </tr>
    {{/each}}  <!-- such plain strings are taken out of table markup and placed before or after depending upon the browser, in case of chrome placed before the table -->
</table>

{{else}}
    <h3>No users found!</h3>
{{/if}}

Вот как это делает хром -

{{#if users}}
{{#each users}}
{{/each}}
<table>
    <tbody>
        <tr>
            <td>{{username}}</td>
            <td>{{email}}</td>
        </tr>
    </tbody>
</table>
{{else}}
    <h3>No users found!</h3>
{{/if}}

На данный момент у меня нет firefox. но я уверен, что firefox имеет свой собственный метод коррекции разметки.

после этого, когда вы вынимаете его из DOM с помощью jquery и компилируете

var htmlSource = $(data).html();
var template = Handlebars.compile(htmlSource);

он просто выведет этот

<table>
    <tbody>
        <tr>
            <td>{{username}}</td>
            <td>{{email}}</td>
        </tr>
    </tbody>
</table>

если вы хотите, вы можете сбросить его после компиляции, чтобы увидеть.

var compiled = template(usersArray);
console.log(compiled);
that.$el.html(compiled);

Это также объясняет, почему вы получаете имя пользователя и адрес электронной почты, когда вы разделяете разметку таблицы в исходном шаблоне.

Теперь, чтобы решить эту проблему, используйте текстовый плагин, как указал Саймон. или поместите шаблон в строку.

Я тоже использую requriejs с чем-то следующим

define([
  'underscore',   // you can replace this with handlebars
  'text!path/to/template.html'
], function(_, Tmpl){
  return _.template(Tmpl);  //and handlebar pre-compilation here
});

таким образом вы также можете заменить этот модуль на предварительно скомпилированный шаблон в процессе сборки.