Handlebars.js和Bootstrap网格 - 在行中包装列

Question

我相信我需要一个定制的Handlebars.js块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上的代码示例

这里是一个Codepen的链接

- user2264934

Answer 1

好的 :)，我找到了答案，在这篇绝妙的帖子中找到了！

这个 helper 正是我想要的。下面是我最终得到的代码 :)

Helper

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

- user2264934

---

我们如何找到行内项目的索引？ - vini

Answer 2

Bootstrap列在12个列后会自动换行。问题是我们失去了行的底部边距。

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

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

- Thomas Lang