在每个循环中的给定迭代中在 Handlebarsjs 中推送 html 标记

Question

我的 channel.json 有 7 个信息对象在 hb 中迭代，我想在它们之间插入一个日期。换句话说，我如何在第 3 次迭代后，在使用把手的循环之间推送一个 html 标签以显示？最终我想推入一个循环。我想在不修改 .json 数据的情况下完成此操作。

我的 index.handlebars.

中有以下代码

 <div class="container">
      <h5>{{msg}}</h5>
      {{#each channelData}}
      <div class="card-panel grey lighten-5 z-depth-1">
        <div class="row valign-wrapper">
          <div class="col s1">
            <img alt="" class="circle responsive-img align" src="{{subjectPhotoUrl}}">
          </div>
          <div class="col s5">
            <div>
              <h5 class="title">{{title}}</h5>
              <br/>
              <p class="description">{{description}}</p>
            </div>
          </div>
          <div class="col s3">
            <div class="align">
              <img alt="" class="circle responsive-img" src=
              "{{instructorPhotoUrl}}"> <span class="instructor">{{instructorName}}</span>
            </div>
           </div> {{/each}}

以下代码在我的 app.js 文件中。

   var channel  = require("./data/channel.json");
    app.get('/', function(req, res) {
        res.render('index', {
        msg:new Date(),
        channelData: channel
      });
    });

我还想知道是否可以操纵元素使 7 个容器中的 2 个靠在一起，边距为 0，背景为红色？意味着仅独立地为两个容器操作 css，其中一个容器尚未创建，但仍在遍历它们。

另外，我如何才能让 {{msg}} 在循环内显示，目前如果我添加 {{msg}} 标签代替 {{title}} 标签，则不会显示任何内容，但是它确实显示在循环上方的外部。

Answer 1

您可以利用在循环中 @index 引用当前索引这一事实，并定义自定义块助手以根据其值有条件地呈现您的标记。

当然，虽然你可以用车把做到这一点，但这违背了它的理念，将任何逻辑放在格式化你传递的数据的函数中会更惯用到模板。

助手可能看起来像：

Handlebars.registerHelper('nthIteration', function(index, i, options) {
    if (index === i) {
        return options.fn(this);
    }
    return options.inverse(this);
});

你会像这样使用它：

{{#each channelData}}
    <!-- my regular markup -->
    <div class="card-panel grey lighten-5 z-depth-1">
    </div>
    {{#nthIteration @index 2}}
        <!-- markup to insert after third iteration -->
        {{ ../msg }}
    {{/nthIteration}}
{{/each}}

我不太清楚你在第二个问题中到底想要什么，但你可以根据你的需要调整 nthIteration 块助手。

在每个循环中的给定迭代中在 Handlebarsjs 中推送 html 标记

Pushing an html tag in Handlebarsjs at a given iteration within an each loop

javascript

node.js

express

handlebars.js