Я следую шаблону, который успешно обрабатывается с помощью handlerbarjs -
<ul>
{{#each models}}<li>{{attributes.subject_name}}</li>{{/each}}
</ul>
Но при том, что одни и те же данные передаются другому шаблону, он не отображает. Если я попытаюсь заменить li
на table
, она не работает.
<table class="table">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
{{#each models}}
<tr>
<td>{{attributes.subject_name}}</td>
</tr>
{{/each}}
</table>
Код, который компилирует tempalte -
template: Handlebars.compile($("#subjectList").html()) ,
#subjectList
- это идентификатор родительского div (не упоминается в вопросе)
И вот как я передаю данные в tempalte -
this.$el.html(this.template(this.collection));
Как я проверял в DevTools, я вижу, что сбор загружается правильно, и когда первый шаблон получает визуализацию, я думаю, что данные передаются правильно.
Шаблон в вашем примере jsfiddle:
{{#each subjects}}
<li>{{subject_name}}</li>
{{/each}}
<table class="table">
{{#each subjects}}
<tr>
<td>{{subject_name}}</td>
</tr>
{{else}}
<tr>
<td colspan="4">No Subjects Added Yet.</td>
</tr>
{{/each}}
</table>
недействителен HTML. Если вы поместите это внутри <div>
(даже скрытого), браузер часто будет пытаться переписать его, чтобы сделать его действительным HTML. Этот процесс очистки, как правило, мяснет ваш шаблон.
Вам нужно разместить свой шаблон внутри того, что браузер не будет пытаться интерпретировать. Стандартное решение - использовать <script>
с соответствующим типом контента:
<script id="subjectlist" type="text/x-handlebars">
...
</script>
Кроме того, <li>
должен иметь родительский элемент <ul>
, <ol>
или <menu>
поэтому ваш шаблон jsfiddle должен выглядеть следующим образом:
<script id="subjectList" type="text/x-handlebars">
<ul>
{{#each subjects}}
<li>{{subject_name}}</li>
{{/each}}
</ul>
...
</script>