Question

我的布局有效，如下所示

<ul class="row">
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
</ul>

我想要的是，对于每5个项目，使用“row”类创建一个新行，以便我的代码看起来如下所示

<ul class="row">
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
<li>content</li>
</ul>
<ul class="row">
    <li>content</li>
    <li>content</li>
</ul>

有人可以建议如何使用把手助手来完成这项工作吗？

Answer 1

您可以创建一个包装帮助器，将所需数量的元素中的行数组分开：

// attr : name of the attribute in the current context to be split, 
//        will be forwarded to the descendants
// count : number of elements in a group
// opts : parameter given by Handlebar, opts.fn is the block template
Handlebars.registerHelper('splitter', function (attr, count, opts) {
    var context, result, arr, i, zones, inject;

    context = this;
    arr = context[attr];
    zones = Math.ceil(arr.length / count);

    result="";
    for (i = 0; i < zones; i++) {
        inject = {};
        inject[attr] = arr.slice(i * count, (i + 1) * count);

        result += opts.fn(inject);
    }

    return result;
});

假设您的数据传递为{ rows: [ {text: "Row 1"}, ... ] }，模板可能如下所示

{{#splitter "rows" 5}}
    <ul class='row'>
        {{#each rows}}
        <li>{{text}}</li>
        {{/each}}
    </ul>
{{/splitter}}

与http://jsfiddle.net/HwJ6s/

一起玩的小提琴

如何使用Handlebars.js创建条件行类？

1 个答案: