如何将数组渲染为特定形式以供小胡子渲染

Question

我通过 API 获得了一组带有图像位置的对象，但我无法渲染它。

我设法使用下划线将我的数组分成 4 个块，但我不知道如何将我的数据按摩成正确的形式，因此我可以通过小胡子将其渲染出来。

目前的代码如下所示：

var template = "<ul>{{#images}}<li>{{location}}</li>{{/images}}</ul>";

var data = [
    {"location":"gallery\/Baar_Toit_5.jpg"},
    {"location":"gallery\/Baar_Toit_7.jpg"},
    {"location":"gallery\/Baar_Toit_8.jpg"},
    {"location":"gallery\/Baar_Int_1.jpg"},
    {"location":"gallery\/Baar_Int_2.jpg"},
    {"location":"gallery\/Baar_Int_3.jpg"},
    {"location":"gallery\/Baar_Int_4.jpg"},
    {"location":"gallery\/Baar_Uus_01.jpg"},
    {"location":"gallery\/Baar_Uus_02.jpg"},
    {"location":"gallery\/Baar_Uus_03.jpg"},
    {"location":"gallery\/Baar_Uus_04.jpg"},
    {"location":"gallery\/Baar_Uus_05.jpg"},
    {"location":"gallery\/Baar_Uus_06.jpg"},
    {"location":"gallery\/Baar_Uus_07.jpg"}
];

var n = 4;
var imgs = _.groupBy(data, function(element, index){
    return Math.floor(index/n);
});

console.log(imgs);

Mustache.parse(template);
var rendered = Mustache.render(template, { imgs: JSON.parse(imgs) });
$('#gallery').html(rendered);

我创建了一个小沙盒用于测试目的，请随意使用它：http://jsfiddle.net/qK5NT/149/

我想要的输出是：

<ul>
    <li>
        <p>img/1.jpg</p>
        <p>img/2.jpg</p>
        <p>img/3.jpg</p>
        <p>img/4.jpg</p>
    </li>
    <li>
        <p>img/5.jpg</p>
        <p>img/6.jpg</p>
        <p>img/5.jpg</p>
        <p>img/6.jpg</p>
    </li>
    <li>
        <p>img/5.jpg</p>
        <p>img/6.jpg</p>
        <p>img/5.jpg</p>
        <p>img/6.jpg</p>
    </li>
    <li>
        <p>img/5.jpg</p>
        <p>img/6.jpg</p>
    </li>
</ul>

任何帮助将不胜感激！

Answer 1

groupBy 不是这项工作的正确工具，对象在 JavaScript 中没有排序，因此无法保证您会以正确的顺序获得块。是的，这意味着分块的canonical answer 是错误的。

所以你的第一个问题是正确地分块数据。如果你使用 lodash，你可以使用它的_.chunk。如果你使用的是普通的下划线，你可以混入你自己的_.chunk 并且可以很容易地适应 lodash 版本：

_.mixin({
    chunk: function(a, n) {
        // Based on lodash's
        var i = 0, length = a.length, ri = -1;
        var result = Array(Math.ceil(length / n));
        while(i < length)
            result[++ri] = a.slice(i, i += n);
        return result;
    }
});

现在您可以将数据分成四份，并按照正确的顺序得到一个数组数组：

var chunks = _(data).chunk(4);

然后你想把chunks交给你的模板：

var rendered = Mustache.render(template, {
    chunks: chunks
});

最后，您的模板需要遍历块以生成<li>s，然后遍历每个块以在<li>s 中生成<p>s。看起来像这样：

<ul>
    {{#chunks}}
        <li>
            {{#.}}
                <p>{{location}}</p>
            {{/.}}
        </li>
    {{/chunks}}
</ul>

演示：http://jsfiddle.net/ambiguous/b2te16pj/