在玉模板中分块数组

Question

我有一个数组，以及一个将数组作为参数的 mixin。 我如何将数组分成四个部分并传递给 mixin？

所以有点像这样但更好的工作：

 each index, i in myArray
     if i%4 == 0
         +carouselItem([myArray[i], myArray[i+1], myArray[i+2], myArray[i+3]])

Answer 1

我会建议一些不同的方法：在请求处理函数中将数组转换为二维数组，然后在 Jade 模板中对二维数组（数组的数组）执行迭代。

通过这种方法，模板将变得更加简单，所有转换都将在处理程序方法（控制器）内发生，您可以在其中访问不同的库等。

例子： 为了将数组转换为二维数组，您可以使用以下方法：

function arrayTo2DArray (list, howMany) {
    var result = []; input = list.slice(0); 
    while(a[0]) { 
        result.push(a.splice(0, howMany)); 
    }
    return result;
}

您的请求处理程序可能如下所示：

exports.handler = function(req, res) {

    // myArray with some values

    res.render('template' { 
        myArray: arrayTo2DArray(myArray, 4) 
    }
}

如果你的

myArray

是，比如说，

['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']

，

arrayTo2DArray(myArray, 4)

会回来

[
    ['a', 'b', 'c', 'd'], 
    ['e', 'f', 'g', 'h']
]

您的 Jade 模板可能看起来像这样（更简单）

each values in myArray
    +carouselItem(values)

我希望这会有所帮助。

Answer 2

我刚刚做了类似的事情。

解决方案：

步骤#1：为Array类原型添加必要的实例方法：

将它放在调用/呈现视图的控制器中，您将在其中调用该 mixin.

Array.prototype.each_slice = function (size, callback) {
    for (let i = 0, l = this.length; i < l; i += size) {
        callback.call(this, this.slice(i, i + size));
    }
};

第 2 步： 正确渲染哈巴狗文件中的数组切片。

if myArray && myArray.length > 0
    - myArray.each_slice(2, (slice) => {
    +carouselItem(...slice)
    - })

例如，我刚刚使用 Node.js + Express + Pug(ex Jade) 完成了这项工作

这是家庭控制器： 控制器/home.controller.js

const {CodingSkill} = require('../models');
const {errorsHelper} = require('./../utilities');

Array.prototype.each_slice = function (size, callback) {
    for (let i = 0, l = this.length; i < l; i += size) {
        callback.call(this, this.slice(i, i + size));
    }
};

exports.index = async (request, response, next) => {

    try {
        const codingSkills = await CodingSkill.find({}).sort({percentage: -1});
        response.render('home/index', {pageTitle: 'Any title', codingSkills})
    } catch (error) {
        request.toastr.error(error, 'Server Error!');
        errorsHelper.status500(error, next);
    }

}

这是包含部分内容的主页索引视图： views/home/index.pug

最后这是部分： views/home/includes/skills_dynamic.pug

section#skills.skills.section-bg
    .container
        .section-title
            h2 Skills
            p
                | Magnam dolores commodi suscipi. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.
        if codingSkills && codingSkills.length > 0
            - codingSkills.each_slice(2, (slice) => {
            .row.skills-content
                .col-lg-6(data-aos='fade-up')
                    .progress
                        span.skill
                            | #{slice[0].name}
                            i.val #{slice[0].percentage}%
                        .progress-bar-wrap
                            .progress-bar(role='progressbar', aria-valuenow=slice[0].percentage, aria-valuemin='0', aria-valuemax='100')
                if (slice[1])
                    .col-lg-6(data-aos='fade-up', data-aos-delay='100')
                        .progress
                            span.skill
                                | #{slice[1].name}
                                i.val #{slice[1].percentage}%
                            .progress-bar-wrap
                                .progress-bar(role='progressbar', aria-valuenow=slice[1].percentage, aria-valuemin='0', aria-valuemax='100')


            - })

视觉效果：