Question

我目前正在学习网络开发。我正在尝试使用pug和javascript动态填充服务器端的页面。我的帕格代码在下面

#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：意外字符'＃'

Answer 1

首先，让我们从模板开始。您不必在模板内重新声明变量，它们已经在您那里了。另外请注意，如果不存在变量，则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”的变量中的模板。

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

1 个答案: