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

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中的对象未排序，因此无法保证您将以正确的顺序获取块。 是的，这意味着分块的规范答案是错误的。

因此，您的第一个问题是正确地对数据进行分块。 如果您使用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> ，然后遍历每个块以在<li>内生成<p> 。 看起来像这样：

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

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