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文件 - 无论组大小如何，模板本身都能正常工作。

Answer 2

_.each还通过向迭代器函数添加第二个参数为您提供当前迭代的索引，因此您可以这样做：

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

    {{ if(rem = index % 2 == 0) { }} <li class=""> {{ } }}
        <a class="title" href="{{= item.Id }}"><h2>{{= item.Name}}</h2></a>
        <p>{{= item.ShortDesc}}</p>
    {{ if(! rem) { }} </li> {{ } }}

{{ }); }}

// Just in case items has an odd number of elements:
{{ if(items.length % 2 != 0){ }} </li> {{ } }}

您可以在此代码段中尝试。它使用Array.prototype.forEach()，而不是Underscore.js one，但回调的参数是相同的：(element, index, list)：

var html = '';

items = ['A-1', 'A-2', 'B-1', 'B-2', 'C-1', 'C-2', 'D-1', 'D-2', 'Odd last element.'];

items.forEach(function(item, index) { 
    if(rem = index%2==0) html += '<li>';
    html += '<div>' + item + '</div>';
    if(!rem) html += '</li>';
});

if (items.length % 2 != 0) html += '</li>'

document.getElementById("wrapper").innerHTML = html;

ul {
list-style: none;
padding:0;
}

li {
border: 1px solid black;
margin: .5rem 0 0 0;
}

div {
border: 1px solid #CCC;
margin: .5rem;
}

<ul id="wrapper"></ul>

如何在Underscore.js中使用_.each（）遍历每两个项目

2 个答案: