jjzjj

javascript - Handlebars 未填满表格

coder 2024-05-06 原文

我正在使用 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(data)) 时，没有任何错误。 当控制台使用 jQuery 记录数据时，html 被更改:console.log($(data));

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

附言nemesv 谢谢你的编辑 ;)

最佳答案

确保您在标签中输出模板，这样浏览器就不会尝试解析它。

<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 加载，而不是确保使用 text! plugin 加载模板: require("text!path/to/template.html")

更妙的是，您可以将所有 Handlebars 编译委托(delegate)给 handlebars template loading plugin所以模板在您的构建中预编译 - 这可能是最好的。

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

关于javascript - Handlebars 未填满表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20613352/

填满javascriptcodegtltjquerybackbone.jshandlebars.js

有关javascript - Handlebars 未填满表格的更多相关文章

  1. ruby-on-rails - Prawn - 表格单元格内的链接 - 2

    我正在尝试用Prawn生成PDF。在我的PDF模板中，我有带单元格的表格。在其中一个单元格中，我有一个电子邮件地址:cell_email=pdf.make_cell(:content=>booking.user_email,:border_width=>0)我想让电子邮件链接到“mailto”链接。我知道我可以这样链接:pdf.formatted_text([{:text=>booking.user_email,:link=>"mailto:#{booking.user_email}"}])但是将这两行组合起来(将格式化文本作为内容)不起作用:cell_email=pdf.make_c

  2. ruby - 如何使用 Ruby 将 CSV 文件读入 HTML 表格？ - 2

    我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。 最佳答案 这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda

  3. ruby - 如何使用 Nokogiri 解析纯 HTML 表格？ - 2

    我想用Nokogiri解析HTML页面。页面的一部分有一个表，它没有使用任何特定的ID。是否可以提取如下内容:Today,3,455,34Today,1,1300,3664Today,10,100000,3444,Yesterday,3454,5656,3Yesterday,3545,1000,10Yesterday,3411,36223,15来自这个HTML:TodayYesterdayQntySizeLengthLengthSizeQnty345534345456563113003664354510001010100000344434113622315

  4. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  5. ruby-on-rails - prawnto 显示新页面时不会中断的表格 - 2

    我有可变数量的表格和可变数量的行，我想让它们一个接一个地显示，但如果表格不适合当前页面，请将其放在下一页，然后继续。我已将表格放入事务中，以便我可以回滚然后打印它(如果高度适合当前页面)，但我如何获得表格高度？我现在有这段代码pdf.transactiondopdf.table@data,:font_size=>12,:border_style=>:grid,:horizontal_padding=>10,:vertical_padding=>3,:border_width=>2,:position=>:left,:row_colors=>["FFFFFF","DDDDDD"]pdf.

  6. ruby - 如何以表格格式快速打印 Ruby 哈希值？ - 2

    有没有办法快速将表格格式的ruby​​哈希打印到文件中？如:keyAkeyBkeyC...1232343451253474456...其中散列的值是不同大小的数组。还是使用双循环是唯一的方法？谢谢 最佳答案 试试我写的这个gem(在表中打印散列、ruby对象、ActiveRecord对象):http://github.com/arches/table_print 关于ruby-如何以表格格式快速打印Ruby哈希值？，我们在StackOverflow上找到一个类似的问题：

  7. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  8. ruby-on-rails - 为什么我不能在 Rails 的表格中创建一个数组作为列？ - 2

    为什么我不能这样做:classCreateModels是否有其他方法可以使数组(“apples”)成为Fruit类实例的属性？ 最佳答案 在Rails4中并使用PostgreSQL，您实际上可以在数据库中使用数组类型:迁移:classCreateSomething 关于ruby-on-rails-为什么我不能在Rails的表格中创建一个数组作为列？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/qu

  9. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  10. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

随机推荐