Question

的 Example fiddle set up here

我遵循使用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的ID（未提及相关内容）

这就是我将数据传递给tempalte的方式 -

this.$el.html(this.template(this.collection));

当我在DevTools中检查时，我可以看到正在正确加载集合，并且当第一个模板被渲染时，我认为数据正在正确传递。

Answer 1

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>, or <menu> parent，因此您的jsfiddle模板应该更像这样：

<script id="subjectList" type="text/x-handlebars">
    <ul>
        {{#each subjects}}
            <li>{{subject_name}}</li>
        {{/each}}
    </ul>
    ...
</script>

演示：http://jsfiddle.net/ambiguous/kxc52/

div内骨架的车把模板不呈现

的 Example fiddle set up here

1 个答案: