javascript - 如何在 Underscore.js 中使用 _.each() 遍历每 2 个项目

Question

您好，我们的一些代码使用 underscore.js 库:

{{ _.each(items, function(item) { }} 

    <li class="">
        <a class="title" href="{{= item.Id }}"><h2>{{= item.Name}}</h2></a>
        <p>{{= item.ShortDesc}}</p>
    </li>

{{ }); }}

将输出:

<li><a><h2>Element 1</h2></a><p>Description of element 1</p></li>
<li><a><h2>Element 2</h2></a><p>Description of element 2</p></li>
...

但我们想要的是:

<li>
    <a><h2>Element 1</h2></a><p>Description of element 1</p>
    <a><h2>Element 2</h2></a><p>Description of element 2</p>
</li>
<li>
    <a><h2>Element 3</h2></a><p>Description of element 3</p>
    <a><h2>Element 4</h2></a><p>Description of element 4</p>
</li>
...

基本上就是填<li>每 2 项使用 _.each .

请指教。谢谢

Answer 1

传递给_.each()的回调函数将循环索引或对象键作为第二个参数，因此理论上您可以使用它。也就是说，如果不小心完成，您可能会发现自己错过了结束语 </li>标签在最后。

我建议使用_.groupBy分组为两个的连续倍数，然后迭代每个:

// In the code which renders the template
// (because you REALLY don't want this in your template):

var groups = _.groupBy(items, function (item, index) {
    return Math.floor(index / 2);
});

// In your template:

{{ _.each(groups, function(itemsInGroup) { }} 
    <li class="">

    {{ _.each(itemsInGroup, function (item) { }}
        <a class="title" href="{{= item.Id }}"><h2>{{= item.Name}}</h2></a>
        <p>{{= item.ShortDesc}}</p>
    {{ }); }}

    </li>
{{ }); }}

这种方法的优点是您可以稍后更改组中的项目数量，并且只需修改输入到模板中的 JavaScript 文件 - 无论组大小如何，模板本身都可以工作。