把手不填表

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

这是我的模板:

{{#if users}}  {{#each users}}  {{/each}} 
{{username}} {{email}}
{{else}}

No users found!

{{/if}}

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

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

 {{#if users}} {{#each users}} {{username}}
{{email}}
{{/each}} {{else}}

No users found!

{{/if}}

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

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

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

你知道为什么它不起作用你能帮助我吗?

编辑:

我刚刚测试了一些,发现当我省略

标签时,数据将显示在HTML中。 但是

不会出现在html中。 将显示其中的数据。

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

 {{#if users}} {{#each users}} {{/each}} {{else}} 

No users found!

{{/if}}
{{username}} {{email}}

如您所见,该表移动到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谢谢你的编辑;)

确保您在标签中输出模板,以便浏览器不会尝试解析它。

  

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

使用require

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

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

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

Simon的解决方案是正确的,并且在各种评论中讨论了问题。 我只是把碎片放在这里。

正如@rescuecreative所指出的,当html插入DOM时,一些浏览器会删除空的

标签。

这里的情况有点类似。 浏览器在看到无效标记时会出现exception。 但在这种情况下,它不是因为缺少tr,td在表中。 因为在表格中的tr之前有额外的行。

你的问题从这里开始。

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

无论您使用何种加载机制,都可以在使用把手编译模板之前将模板插入DOM中。

这是将未编译的模板添加到DOM时发生的情况。

 {{#if users}}   {{#each users}} 
{{else}}

No users found!

{{/if}}

这就是镀铬的方式 –

 {{#if users}} {{#each users}} {{/each}} 
{{username}} {{email}}
{{else}}

No users found!

{{/if}}

截至目前,我没有和我一起使用Firefox。 但我相信firefox有自己的标记校正方法。

在此之后,当您使用jquery和编译将其从DOM中取出时

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

它会输出这个

 
{{username}} {{email}}

如果你想要你可以在编译后将其转储以查看。

 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 }); 

这样,您还可以在构建过程中使用预编译的模板替换此模块。