时间戳

首页 > 解决方案 > 将本地 javascript 变量的值替换为 Pug 的插值

javascript - 将本地 javascript 变量的值替换为 Pug 的插值

问题描述

我是哈巴狗的新手，现在我正在尝试呈现一个 html 视图，其中包含一个表，其条目是从app.js

这是我的index.pug

doctype html
html(lang='en')
    head
        title Pug
    body
        table
            - var columns = ['apple', 'pine', 'peach'];
            tr
                each column in columns
                    th #{column}
            - for (var i = 0; i < 3; i++)
                tr 
                    each column in columns 
                        td #{data[i].column}

这是我的app.js

const express = require('express');
const pug = require('pug')
var app = module.exports = express();

app.set('view engine', 'pug');

var foo = [{
        apple: 1,
        pine: 2,
        peach: 3
    }, {
        apple: 4,
        pine: 5,
        peach: 6
    },
    {
        apple: 7,
        pine: 8,
        peach: 9
    }
];
app.get('/', (req, res) => {
    res.render('index', {
        data: foo
    });
});

app.listen(3000, () => console.log('Listen to port 3000 now'));

我不确定我应该如何执行以下技巧：在内部index.pug我确实声明了一个包含三个可能值的本地 js 数组apple和pine，peach并且我使用 for-each 循环来迭代这个数组。但是，在 pug 的最后一行中，似乎 pug 没有用#{data[i].column}with替换“列” apple，pine并且peach循环正在迭代。

那么有没有办法告诉 pug 用我声明的同一个本地 js 变量的值column替换？#{data[i].column}

谢谢

标签： javascriptpug

解决方案

使用 if 语句检查您的局部变量值和服务器端变量值是否相同，并基于此您可以将值赋予td局部变量column

table
        - var columns = ['apple', 'pine', 'peach'];
        tr
            each column in columns
                th #{column}
        - for (var i = 0; i < 3; i++)
            tr 
                each column in columns
                    if column == data[i].column
                        td column

推荐阅读