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引用当前索引的事实，并定义自定义块帮助程序，以根据其值有条件地呈现标记。

当然，尽管可以使用把手来做这件事，但这违背了它的理念，而且在函数中放置任何逻辑来格式化传递给模板的数据会更加惯用。 / p>

助手看起来像：

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

1 个答案: