Question

我对Handlebars很新，所以你不得不原谅我的天真。

我目前正在使用Handstars博客模板，该模板利用Bootstrap 4作为CSS框架。对于我的文章，我想迭代一个在主页上显示第5篇文章后重复的模式。

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

如果您查看下面的代码，您会看到我目前正在使用占位符作为条件（例如，'every-2nd＆amp; every-3rd'）。我只是不确定我应该在这里做什么，而且我找不到帮助来解决我的问题。

<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

您好我建议您使用＆＃34;测试＆＃34;将检查索引循环编号的帮助程序。

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 "";
    }
});

因此，在使用帮助程序后，您的代码将如此：

<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}}

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

把手：根据'nth'显示HTML标记

1 个答案: