Question

我正在使用Meteor并尝试绕过缺少Handlebars @index。我越来越近了。我已经实现了一个计数器和一些辅助函数：

initCounter将计数器初始化为0
incCounterMod递增计数器并应用模数来获取每个X数
counterIs只需检查计数器是否为特定数字X

所有这些基本上都是为了在我的输出上每行获得三个项目。这是一个示例：

  {{initCounter}}
  <div class="row-fluid">
  {{#each list}}
    <span></span>
    {{incCounterMod 3}}
    {{#if counterIs 0}}
      </div><div class="row-fluid">
    {{/if}}
  {{/each}}
  </div>

正如你所看到的，我正试图结束一个<div>并开始另一个。我应该得到如下输出：

<div class="row-fluid">
  <span></span>
  <span></span>
  <span></span>
</div>
<div class="row-fluid">
  <span></span>
  <span></span>
  <span></span>
</div>
...

问题是...... Handlebars或Meteor似乎通过反转div标签来“修复”或“逻辑匹配”我的</div><div class="row-fluid">块，以便输出为：

<div class="row-fluid">
  <span></span>
  <span></span>
  <span></span>
  <div class="row-fluid"></div>
  <span></span>
  <span></span>
  <span></span>
  <div class="row-fluid"></div>
  <span></span>
  ...
</div>

有点傻，因为我没有要求。我正在尝试结束一个<div>并启动另一个，根据它们在源代码中出现的位置不匹配它们。（注意：控制台调试表明所有计数器和东西都运行良好。）

有没有办法解决这个问题？我认为Handlebars只是渲染了html文本...我想我可能错了。

感谢。

Answer 1

如果你的目标只是使用三列来排列页面上的更多项目，那么每行可能不需要div，你可能想要考虑基于CSS的方法。 Here is an example了解如何以li元素输出数据。 CSS设置容器的宽度和每个li，并将数据流入所需的列数。这种方法的一个优点是您可以使显示器响应（可能您只需要在手机或侧边栏中显示一列，或打印输出中的8列）。那会给你一个非常简单的模板：

<ol>
  {{#each list}}
    <li>{{value}}</li>
  {/each}
</ol>

如果出于某种原因，您希望坚持使用div个，每个span个，那么Handlebars的典型方法是在模板助手中构建数据，一次输出三个（例如list = [[1,2,3], [4,5,6], [7,8,9]]）。可以使用嵌套的{{#each}}块使用以下代码呈现示例结构：

{{#each list}}
  <div>
    {{#each this}}
      <span>{{this}}</span>
    {{/each}}
  </div>
{{/each}}

有趣的是，Handlebars对于它应该如何使用而言是如此固执，它为你“修复”了你的代码，但在大多数情况下它很好用。上面的html应该更容易阅读和排除故障。不过，它会让你的助手javascript变得更复杂。

在Handlebars中正确渲染结束标记

1 个答案: