如何在脚本标记中包含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})