如何将数组变量从javascript传递到pug文件？

Posted 2021-04-02

我目前正在学习网站开发。我试图通过使用哈巴狗和javascript动态填充服务器端的页面。我的Pug代码如下

#products-list.products 
    - var product_list = #{product_list}
    -if(product_list)
      each product in product_list
        +product_element(product['name'],product['price'],product['image'])

product_element是一个mixin，他的代码如下

mixin product_element(name,prod_price,image)
a(href='./produits/${product.id}' title='En savoir plus...')
h2= name
img(alt='product' src='./assets/img/'+image)
p.price= prod_price
  small Prix
  |

我的javascript代码在这里

router.get("/produits", (req, res) => {dataBase.getProducts(null,null).then(
(products)=>{
  if(products)
  {
    console.log('Get /produits sending..');
    res.render("products", {
                            titre: "OnlineShop - Produits", 
                            products_count: products.length+" produits",
                            products_list:JSON.stringify(products)
                            });
  }
}).catch(
(err)=>{
});});

我的请求后我得到了一个有效的产品列表，我的问题是在页面呈现期间，似乎我没有正确地将数据链接到pug文件。我到处搜索，但我没有找到答案。

目前我有这样的错误：SyntaxError：意外的字符'＃'

答案

首先，让我们从模板开始。您不必在模板中重新声明变量，它们已经存在。另请注意，如果变量不存在，那么each循环将不会执行，也不会输出任何内容。

试试这个：

#products-list.products 
  each product in product_list
    +product_element(product['name'],product['price'],product['image'])

然后，mixin内部也会出现问题。它期望看到四个变量输入，但第一行调用product.id，它不是mixin定义中列出的变量之一。传递整个产品对象而不是将其分离为单独的变量可能更好：

mixin product_element(product)
a(href= './produits/' + product.id title='En savoir plus...')
  h2= product.name
  img(alt='product' src='./assets/img/'+ product.image)
  p.price= product.price
    small Prix

哪个会将您的模板更改为：

#products-list.products 
  each product in product_list
    +product_element(product)

最后，您需要将整个产品列表从路径传递到模板中。只需将整个结果集从数据库传递到模板中，如下所示：

router.get("/produits", (req, res) => {dataBase.getProducts(null,null).then(
(products)=>{
  if(products)
  {
    console.log('Get /produits sending..');
    res.render("products", { "product_list": products });
  }
}).catch(
(err)=>{
});});

这会将产品数组传递到名为“product_list”的变量中的模板。