Handlebars：显示基于 'nth' 的 HTML 标记

Question

我对 Handlebars 还很陌生，所以请原谅我的幼稚。

我目前正在开发一个使用 Bootstrap 4 作为 CSS 框架的 Handlebars 博客模板。对于我的文章，我想迭代一个模式，该模式在第 5 篇文章显示在首页后会重复出现。

我的第一篇文章的标记将是默认值。每 2 次和 3 次将使用不同的标记块，并且与每 4 次和 5 次相同。

如果您在下面查看我的代码，您会发现我目前正在使用占位符来表示条件（例如，“每 2 次和每 3 次”）。我只是不确定我应该在这里做什么，而且我无法找到一个帮手来解决我的问题。

<div id="main" class="col-md-8">

  {{#each content}}

    {{#if every-2nd & every-3rd}}

      <div class="col-md-6">
        <h4>{{title}}</h4>
        <p>{{description}}</p>
        <button>{{button_text}}</button>
      </div><!-- /.col -->

    {{else if every-4th & every-5th}}

      <div class="col-md-5">
        <img src="{{img_src}}" />
      </div>
      <div class="col-md-7">
        <h4>{{title}}</h4>
        <button>{{button_text}}</button>
      </div><!-- /.col -->

    {{else}}

      <div class="col-md-12">
        <img src="{{img_src}}" />
        <h4>{{title}}</h4>
        <button>{{button_text}}</button>
      </div><!-- /.col -->

    {{/if}}

{{/each}}

提前感谢您的时间和考虑。

Answer 1

您好，我建议您使用“测试”助手来检查您的索引循环号。

Handlebars.registerHelper('test', function(lvalue, operator, rvalue, options) {
    var doDisplay = false;
    var items = (""+rvalue).split("|");
    var arrayLength = items.length;
    for (var i = 0; (i < arrayLength); i++) {
        if (operator == "eq") {
            if (lvalue == items[i]) {
                doDisplay = true;
            }
        } else if (operator == "ne") {
            if (lvalue != items[i]) {
                doDisplay = true;
            }
        } else if (operator == "gt") {
            if (parseFloat(lvalue) > parseFloat(items[i])) {
                doDisplay = true;
            }
        } else if (operator == "lt") {
            if (parseFloat(lvalue) < parseFloat(items[i])) {
                doDisplay = true;
            }
        }else if (operator == "le") {
            if (parseFloat(lvalue) <= parseFloat(items[i])) {
                doDisplay = true;
            }
        }else if (operator == "ge") {
            if (parseFloat(lvalue) >= parseFloat(items[i])) {
                doDisplay = true;
            }
        }
    }
    if (doDisplay) {
        return options.fn(this);
    } else {
        return "";
    }
});

所以你的代码在使用 helper 后会变成这样：

<div id="main" class="col-md-8">    
  {{#each content}}    
    {{#test @index 'eq' '1|2'}}    
      <div class="col-md-6">
        <h4>{{title}}</h4>
        <p>{{description}}</p>
        <button>{{button_text}}</button>
      </div><!-- /.col -->
    {{/test}}
    {{#test @index 'eq' '3|4'}}
      <div class="col-md-5">
        <img src="{{img_src}}" />
      </div>
      <div class="col-md-7">
        <h4>{{title}}</h4>
        <button>{{button_text}}</button>
      </div><!-- /.col -->
    {{/test}}
    {{#test @index 'ne' '1|2|3|4'}}    
      <div class="col-md-12">
        <img src="{{img_src}}" />
        <h4>{{title}}</h4>
        <button>{{button_text}}</button>
      </div><!-- /.col -->
    {{/test}}    
{{/each}}

如果您需要更多解释，请在 cmets 中告诉我