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>，然后遍历每个块以在<p> s内生成<li> s。这看起来像这样：

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

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

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

1 个答案: