把手不填表

Question

我正在使用Handlebars(v 1.0.0)来填充HTML表格.但不知怎的,它并没有像我以前那样填满表格.

这是我的模板:

{{#if users}}
<table>
    {{#each users}}
        <tr>
            <td>{{username}}</td>
            <td>{{email}}</td>
        </tr>
    {{/each}}
</table>

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

所以我确实找到了用户,因为我没有看到"没有找到用户!" 当我调用一个空对象时,它确实显示"找不到用户!".

当我不使用该表并打印出这些用户时,如下一个示例.用户名和邮件地址'将显示在我的HTML中.

{{#if users}}

    {{#each users}}

        {{username}}<br/>
        {{email}}<br/>

    {{/each}}


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

以下是我在javascript中构建模板的方法:

var htmlSource = $(data).html();
var template = Handlebars.compile(htmlSource);
var compiled = template(usersArray);
that.$el.html(compiled);

现在,当我在console.log中编译对象时,它不会显示该表.

你知道为什么它不起作用你可以帮帮我吗？

编辑:

我刚刚测试了一些,发现当我遗漏<table>标签时数据会显示在HTML中.然而,<tr>并<td>不会出现在HTML中.将显示其中的数据.

编辑2:我发现它似乎是一个jquery问题或javascript问题.当我在console.log中将htmlSource的HTML模板更改为:

{{#if users}}

    {{#each users}}

    {{/each}}


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

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

如您所见,表格移到了if语句之外.我尝试了其他jquery版本(2.0.2,2.0.3,2.0.1,1.10.2),但这不起作用.我尝试使用innerXHTML脚本,但这与jQuery相同.

所以我的猜测是它可能是一个FireFox问题(虽然我尝试过25和26),但Chrome也是如此......也许是EcmaScript中的一些东西？

我很快就会告诉你的......

编辑3:

我用我需要的html创建了一个html文件.使用脚本我得到我需要的html的特定部分并将其放在数据变量中.

现在,当控制台记录数据(console.log(数据))时,没有任何错误.当控制台使用jQuery记录数据时,html会被更改:console.log($(data));

似乎那里出了问题......但只有在使用表格标签时才会出错.这是jQuery无法处理的东西吗？我不知道.我知道如何通过使用脚本标记来克服这个问题...虽然我想使用require加载它;)

PS nemesv谢谢你的编辑;)

Answer 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>

如果type脚本标记上没有属性,HTML解析器将找到错误并尝试解决它.根据您的错误详细信息,这看起来确实如此.

使用require

正如您所说,使用Require加载,而不是确保使用文本加载模板!插件:require("text!path/to/template.html")

为了更加漂亮,你可以将所有把手编译委托给一个把手模板加载插件,这样模板就可以在你的构建中进行预编译 - 这可能是最好的.

无论哪种方式,您的问题是HTML解析器会解析您的模板,这会破坏您的模板内容.确保通过XMLHttpRequest或使用require或在正确键入的脚本标记内将其加载为"text".