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

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

Answer 2

Bootstrap列在12列之后自动换行。问题是我们失去了该行的底部边缘。

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

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