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

Question

我的 channel.json 有 7 个信息对象，它们在 hb 中迭代，我想在它们之间插入一个日期。换句话说，我如何在第 3 次迭代之后，在使用 Handlebars 的循环之间推送 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 引用当前索引这一事实，并定义一个自定义 block 助手以根据其值有条件地呈现您的标记。

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

助手可能看起来像:

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 block 助手。