javascript - Handlebars.js 和 Bootstrap 网格 - 将列换行

Question

我相信我需要一个自定义的 Handlebars.js Block Helper 来处理基于 Bootstrap 的网格系统中的行。我希望每 3 件元素都包装在 <div class="row"></div> 中

期望的输出

<div class="row">
    <div class="col-sm-4">...</div>
    <div class="col-sm-4">...</div>
    <div class="col-sm-4">...</div>
</div>

模板:

{{#employees}}
  <div class="col-sm-4">
    <strong>{{name}}</strong><br>
    {{title}}<br>
    {{skills}}
  </div>
{{/employees}}

数据

var data = {
  "employees" : [
    {
      "name":"Fred Flintstone",
      "title":"Frontend Developer",
      "skills" : "html,css,javascript"
    },
    {
      "name":"Sally Struthers",
      "title":"Frontend Developer",
      "skills" : "html,css,javascript"
    },
    {
      "name":"Ben Wilson",
      "title":"Frontend Developer",
      "skills" : "html,css,javascript"
    },
    {
      "name":"Julie Milson",
      "title":"Frontend Developer",
      "skills" : "html,css,javascript"
    },
    {
      "name":"Mike Barton",
      "title":"Frontend Developer",
      "skills" : "html,css,javascript"
    }
  ]
}

助手概念

这就是我的想法，但需要帮助:)

// pass data and how many per row
Handlebars.registerHelper('gridWrap', function(data,perRow) {

  var wrapper = "";

    // need index
    if(index == 0 || index % perRow == 0) {
        wrapper += '<div class="row">';
    }

    if((index + 1) % perRow == 0 || (index + 1) == data.length) {
        wrapper += '</div>';
    }

        return wrapper;


});

如何使用？？

然后一旦构建了 helper，您将如何在 html 中使用它？

{{#employees}}

    {{#gridWrap employees 3}} {{wrapper}} {{/gridWrap}}

      <div class="col-sm-4">
        <strong>{{name}}</strong><br>
        {{title}}<br>
        {{skills}}
      </div>

    {{#gridWrap employees 3}} {{wrapper}} {{/gridWrap}}

{{/employees}}

代码示例@Codepen

Here's a link to a Codepen

Answer 1

好的 :) 找到答案 here in this killer post !

这个助手正是我要找的。这是我最终得到的:)

助手

Handlebars.registerHelper('grouped_each', function(every, context, options) {
    var out = "", subcontext = [], i;
    if (context && context.length > 0) {
        for (i = 0; i < context.length; i++) {
            if (i > 0 && i % every === 0) {
                out += options.fn(subcontext);
                subcontext = [];
            }
            subcontext.push(context[i]);
        }
        out += options.fn(subcontext);
    }
    return out;
});

模板

{{#grouped_each 3 employees}}
  <div class="row">
    {{#each this }}
      <div class="col-sm-4 item">
        <strong>{{name}}</strong><br>
        {{title}}<br>
        {{skills}}
      </div>
    {{/each}}
  </div>
{{/grouped_each}}