Javascript handlebar.js和引导网格-将列换行

我相信我需要一个定制的handlebar.js块助手来处理基于引导的网格系统中的行。我希望每3项都用

期望输出 助手概念 这就是我所想的，但需要帮助：）

//传递数据以及每行传递多少数据
把手.注册表帮助器（'gridWrap'，函数（数据，perRow）{
var=”；
//需要索引
如果（索引==0 | |索引%perRow==0）{
包装器+=''；
}
如果（（索引+1）%perRow==0 | |（索引+1）==data.length）{
包装器+=''；
}
返回包装器；
});

如何使用？？ 那么一旦构建了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}}

{{{#雇员}
{{{{gridWrap}{{wrapper}{{/gridWrap}}
{{name}

{{title}}

{{skills}}
{{{{gridWrap}{{wrapper}{{/gridWrap}}
{{/雇员}

代码示例@Codepen 好：）找到了答案

这个助手正是我要找的。以下是我的结论：）

帮手

handlebar.registerHelper（'grouped_each'，函数（each，context，options）{
var out=“”，子上下文=[]，i；
if（context&&context.length>0）{
对于（i=0；i0&&i%every==0）{
out+=options.fn（子上下文）；
子文本=[]；
}
推送（上下文[i]）；
}
out+=options.fn（子上下文）；
}
返回；
});

模板

{{{{每3名员工分组}
{{{#每个这个}
{{name}

{{title}}

{{skills}}
{{/每个}}
{{/每个}

引导列在12列之后自动换行。问题是我们失去了这一行的底边

虽然你提供的答案可能有用，但它非常复杂

---

另一种更简单的解决方案是在列中添加一个底部边距。

如何找到行中项目的索引？

{{#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;


});

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

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