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

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 isn't the right tool for this job, objects aren't ordered in JavaScript so there's no guarantee that you'll get your chunks in the right order. Yes, this means that the canonical answer 分块是错误的。

所以您的第一个问题是正确分块数据。如果您使用的是 lodash，则可以使用它的 _.chunk。如果你使用普通的 Underscore，你可以混合你自己的 _.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/

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

How to render array into specific form for mustache to render

html

javascript

mustache

underscore.js