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;


});

如何使用？？

然后一旦构建了帮助器,你将如何在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

这是Codepen的链接

Answer 1

好:) 在这个杀手哨所找到答案!

这个助手正是我想要的.这是我最终得到的:)

帮手

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