javascript - 从 HTML 转换后 EJS 导致渲染错误

标签 javascript node.js npm ejs

这是我一个多月以来参与的一个更大项目的一些片段。我花了大约 6 个小时进行故障排除,一切都融合在一起。

在转换为 EJS 之前,一切都很完美。

我并不是在寻找彻底的解决方案,但我对 EJS 是全新的,所以在我恢复到 HTML 上的 Vanilla JS 之前,正确的方向会拯救我。这里肯定有什么问题。

错误:

ReferenceError:赋值中左侧无效 在新函数()处 在 Template.compile (/home/bob/Documents/Programming/Portfolio/node_modules/ejs/lib/ejs.js:626:12) 在 Object.compile (/home/bob/Documents/Programming/Portfolio/node_modules/ejs/lib/ejs.js:366:16) 在handleCache(/home/bob/Documents/Programming/Portfolio/node_modules/ejs/lib/ejs.js:215:18) 在 tryHandleCache (/home/bob/Documents/Programming/Portfolio/node_modules/ejs/lib/ejs.js:254:16) 在 View.exports.renderFile [作为引擎] (/home/bob/Documents/Programming/Portfolio/node_modules/ejs/lib/ejs.js:459:10) 在 View.render (/home/bob/Documents/Programming/Portfolio/node_modules/express/lib/view.js:135:8) 在 tryRender (/home/bob/Documents/Programming/Portfolio/node_modules/express/lib/application.js:640:10) 在 Function.render (/home/bob/Documents/Programming/Portfolio/node_modules/express/lib/application.js:592:3) 在 ServerResponse.render (/home/name/Documents/Programming/Portfolio/node_modules/express/lib/response.js:1012:7)

.ejs 文件:

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Services</title>
  <meta name="services" contents="Services Page">
  <link rel="stylesheet" href="styles.css" />
  <script src="store.js" async></script>
</head>

<body>
  <header class="main-header">
    <nav class="nav main-nav">
      <ul>
        <li><a href="index.html">HOME</a></li>
        <li><a href="services.html">SERVICES</a></li>
        <li><a href="about.html">ABOUT</a></li>
      </ul>
    </nav>
    <h1 class="my-name my-name-large">My Name</h1>
  </header>

  <section class="container content-section">
    <h2 class="section-header">STARTUP</h2>
    <div class="service-items">
      <% items.startup.forEach(function(item){ %>
        <div class="service-item shop-item" data-item-id="<%= item.id %>">
          <span class="service-item-title"><%= item.name %></span>
          <img class="service-item-image" src="Images/Services/<%= item.imgName %>" height="96px" width="96px">
          <div class="service-item-details">
            <span class="service-item-price">$<%= item.price /1= 100 %></span>
            <button class="btn btn-service shop-item-button" type="button">ADD TO CART</button>
          </div>
        </div>
        <% }) %>
    </div>
    <h2 class="section-header">RESOURCES</h2>
    <div class="service-items">
      <% items.startup.forEach(function(item){ %>
        <div class="service-item shop-item" data-item-id="<%= item.id %>">
          <span class="service-item-title"><%= item.name %></span>
          <img class="service-item-image" src="Images/Services/<%= item.imgName %>" height="96px" width="96px">
          <div class="service-item-details">
            <span class="service-item-price">$<%= item.price /1= 100 %></span>
            <button class="btn btn-service shop-item-button" type="button">ADD TO CART</button>
          </div>
        </div>
        <% }) %>
    </div>
    <h2 class="section-header">CONSULTING</h2>
    <div class="service-items">
      <% items.startup.forEach(function(item){ %>
        <div class="service-item shop-item" data-item-id="<%= item.id %>">
          <span class="service-item-title"><%= item.name %></span>
          <img class="service-item-image" src="Images/Services/<%= item.imgName %>" height="96px" width ="96px">
          <div class="service-item-details">
            <span class="service-item-price">$<%= item.price /1= 100 %></span>
            <button class="btn btn-service shop-item-button" type="button">ADD TO CART</button>
          </div>
        </div>
        <% }) %>
    </div>
  </section>

  <section class="container content-section">
    <h2 class="section-header">CART</h2>
    <div class="cart-items-header">
      <div class="service-item-details">
        <span class="cart-item cart-column-header cart-header">ITEM</span>
        <span class="cart-price cart-column-header cart-header">PRICE</span>
        <span class="cart-quantity cart-column-header cart-header">QUANTITY</span>
      </div>
    </div>
    <div>
      <div class="cart-items">


      </div>
      <div class="cart-total">
        <strong class="cart-total-title">Total</strong>
        <span class="cart-total-price">$0.00</span>
        <button class="btn btn-primary btn-purchase" type="button">PURCHASE</button>
      </div>
    </div>
  </section>


  <footer class="main-footer">
    <div class="container main-footer-container">
      <h3 class="my-name">my-name</h3>
      <ul class="nav footer-nav">
        <li>
          <a href="mywebsite.com"><img src="./Images/Icons/Youtube.png" height="48px" width="48px"></a>
        </li>
        <li>
          <a href="mailto:bob@bbass.co" target="_blank"><img src="./Images/Icons/Gmail.png" height="48px" width="48px"></a>
        </li>
        <li>
          <a href="https://www.github.com/716green" target="_blank"><img src="./Images/Icons/Github.png" height="48px" width="48px"></a>
        </li>
      </ul>
    </div>
  </footer>
</body>

</html>

最佳答案

就是这一行:

<span class="service-item-price">$<%= item.price /1= 100 %></span>

你的意思可能是

<span class="service-item-price">$<%= item.price / 100 %></span>

关于javascript - 从 HTML 转换后 EJS 导致渲染错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60134177/

相关文章:

javascript - 无法在 jQuery 函数内执行条件语句

javascript - Okta 是否使用 Passport.js?

javascript - 如何返回JSON数据类似于XML从数据库asp.net返回数据的方式

javascript - $q。所有 promise (访问控制允许来源)

javascript - 如何使用 javascript 添加可搜索下拉菜单

javascript - 我如何在 JavaScript 依赖框架之间进行选择?

node.js - 尝试更新 Docker 中的 NPM : code EISDIR

javascript - Express 4 ans Socket.io - 在模块中访问 app.io

windows - 在 Windows 启动时启动 Node.js 文件的最佳方式

ruby-on-rails - 如何在rails中使用npm包?