车把不填表格 [英] Handlebars does not fill table

问题描述

我用的把手（V 1.0.0）填写表格的HTML。
然而不知何故，没有填满表像我习惯了。

I am using Handlebars (v 1.0.0) to fill a table in HTML. However somehow it does not fill the table like I am used to.

下面是我的模板：

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

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

所以，我确实发现用户，因为我没有看到未找到用户！当我把一个空的对象，它并显示没有找到用户！

So I does find users because I do not see the "No users found!" and when I call an empty object it does show the "No users found!".

当我不使用该表并打印出这些用户喜欢在下一个例子。该usersnames和邮件地址将在我的HTML显示出来。

When I do not use the table and print out these users like the next example. The usersnames and mail address' will show up in my HTML.

{{#if users}}

    {{#each users}}

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

    {{/each}}


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

下面是我的模板是如何构建的JavaScript：

Here is how my template is build in the javascript:

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

现在，当我CONSOLE.LOG编译对象，它不显示表了。

Now when I console.log the compiled object, it doesn't show the table already.

你知道为什么它不工作，你能帮助我吗？

Do you know why it doesn't work and can you help me out?

编辑：

我刚刚测试了一些，发现数据将在HTML显示出来，当我离开了＆LT;表＆gt; 标记。然而，＆LT; TR＆GT; 和＆LT; TD＆GT; 将在HTML显示出来。在它的数据将显示出来。

I just tested some more and found that the data will show up in the HTML when I leave out the <table> tags. However the <tr> and <td> won't show up in html. The data in it will be shown.

编辑2：
我发现，它似乎是一个jQuery的问题或JavaScript的问题。
当我CONSOLE.LOG的htmlSource HTML模板更改为这样的：

EDIT 2: I found out that it seems to be a jquery issue or javascript issue. When I console.log the htmlSource the HTML template is changed to this:

{{#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的。

As you can see the table is moved outside the if statement. I tried other jquery versions (2.0.2, 2.0.3, 2.0.1, 1.10.2) but this didn't work. I tried using the innerXHTML script however this works the same as jQuery.

所以我的猜测是，它可能是一个Firefox的问题（虽然我试过25和26），铬做同样的...也许东西在ECMAScript中??

So my guess is that it might be a FireFox issue (though I tried 25 and 26), Chrome does the same... maybe something in EcmaScript??

我会让你很快就会知道...

I will let you know soon...

编辑3：

我创建的HTML我需要一个HTML文件。有了一个脚本，我得到的HTML我需要，并将此数据变量的特定部分。

I created an html file with the html I need. With a script I get the specific section of html I need and place this in the data variable.

现在，当控制台日志中的数据（的console.log（数据））并无不妥。
在控制台登录使用jQuery中的数据，HTML被改变：执行console.log（$（数据））;

Now when console logging the data (console.log(data)) there is nothing wrong. When console logging the data with jQuery, the html is altered: console.log($(data));

看来事情错了那里..但只有使用表标签时。
这是不是jQuery的不能处理？我不知道。我知道如何使用脚本标签来解决这个问题...虽然我想加载使用要求;）

It seems something is going wrong there.. but only when using table tags. Is this something jQuery can't handle? I don't know. I know how to overcome this issue by using the script tag... Though I would like to load that using require ;)

P.S。 nemesv感谢你的编辑;）

P.S. nemesv thanks for you're edits ;)

推荐答案

请确保你在一个标签输出模板所以浏览器不要尝试解析它。

Make sure you're outputting your template in a tag so the browser don't try to parse it.

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

如果没有类型的脚本标记属性，HTML解析器会发现错误，并尝试解决它。从你的错误的细节，它真的看起来是这里的情况。

If there's no type attribute on the script tag, the HTML parser will find a bug and try to resolve it. From your bug details, it really looks like it is the case here.

使用要求

正如你指出你加载使用要求，比确保您使用文字载入您的模板！插件：要求（！文路径/要/ template.html）

As you noted you load using Require, than make sure you load your template using the text! plugin: require("text!path/to/template.html")

要成为更炫，你可以委托所有的车把编译到车把模板加载插件模板是precompiled构建内部 - 这可能是最好的。

To be even fancier, you could delegate all the handlebars compilation to a handlebars template loading plugin so templates are precompiled inside your build - this is probably the best.

无论哪种方式，您的问题是，您的模板得到由HTML解析器解析，并且是打破你的模板内容。确保装入为文本通过XMLHtt prequest或要求或键入正确的脚本标签内。

Either way, your issue is that your template get parsed by the HTML parser and that is breaking your template content. Make sure you load it as "text" via XMLHttpRequest or with require or inside a script tag correctly typed.

这篇关于车把不填表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！