首页 > 解决方案 > 带后端的动态车把主模板

问题描述

在我的快递应用程序中使用 HBS 作为模板引擎。尝试在动态页面(详细信息页面)中显示标题时出现此问题。

我的控制器

exports.getProduct = (req, res, next) => {
    var prodId = req.params.productId;
    Product.findById(prodId)
    .then(([product]) => {
        res.render('shop/product-detail', { 
            product: product[0], 
            title: product.title 
        });
    })
    .catch(err => console.log(err));
};

我的布局

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>{{{ title }}}</title>
  </head>

我的观点


<div class="container">

<div class="card-deck">
  <div class="card">
    <img src="{{product.imageUrl}}" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">{{product.title}}</h5>
      <p class="card-text">{{product.description}}</p>
      <p class="card-text"><small class="text-muted">Rp {{product.price}}</small></p>
      <form action="/add-to-cart" method="POST">
        <button type="submit" class="btn btn-outline-primary btn-block">Add to Cart</button>
        <input type="hidden" name="productId" value="{{product.id}}">
      </form>
    </div>
  </div>
</div>

</div>

鉴于产品标题工作正常。但是在主模板(布局)中没有出现。

标签: node.jsexpress

解决方案


服务器端 : title: product[0].title

前端替换<title>{{{ title }}}</title>

<title>{{ title }}</title>


推荐阅读