如何在脚本标签中包含 ejs

Question

我想使用脚本标记内的 forEach 循环来渲染 ejs，但出现产品未定义错误。我无法正确地将变量传递给 ejs.render() 函数。

这是我的产品卡 ejs 模板：

<div class="card mb-3" style="max-width: 540px">
    <div class="row no-gutters">
      <div class="col-md-4">
        <img
          src="/images/<%= product.image_groups[0].images[0].link%>"
          class="card-img"
          alt="<%= product.image_groups[0].images[0].alt%>"
        />
      </div>
      <div class="col-md-8">
        <div class="card-body d-flex flex-column">
          <h5 class="card-title"><%= product.name %></h5>
          <p class="card-text">
            <%- product.short_description %>
          </p>

          <div class="card-footer bg-transparent border-dark mt-auto">
            <div class="row">
              <div class="col sm-6">
                <p>Price:<%= product.currency %> <%= product.price %></p>
              </div>
              <div class="col sm-6">
                <a href="/product/<%= product.primary_category_id %>/<%= product.id %>" class="btn btn-primary">More Info</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

这是我的脚本：

<script>
  const form = document.querySelector("form");

  form.addEventListener("submit", async (e) => {
    e.preventDefault();
    // get values
    const productName = form.productname.value
    const searchResultsEl = document.getElementById('searchResults')
    
    try {
      const res = await fetch("/search", {
        method: "POST",
        body: JSON.stringify({ productName }),
        headers: { "Content-Type": "application/json" },
      })
      const foundProducts = await res.json()
      foundProducts.data.forEach(product => {
        let html = ejs.render("<%- include('../product/productCard.ejs') %>",{product:product})
        searchResultsEl.innerHTML += html
        
      })

    } catch (err) {

      console.log(err)
    }
  });
</script>

错误： 产品未定义

我可以使用 console.log 打印产品（产品）所以有产品。我不知道出了什么问题。有什么帮助吗？

错误图片：

Answer 1

尝试

let html = ejs.render('<%- include("../product/productCard.ejs") %>',{product:product})