javascript - 即使我传入我的变量，车把也不会呈现

问题描述

我正在创建一个待办事项列表，但我的车把没有渲染。我正在使用护照进行谷歌身份验证，我相信我将我的变量存储在下面的评论中。我也在使用 mongodb，当我添加 todos 时，它们被存储在数据库中。

根据 hbs 文档，如果参数返回false, undefined, null, "", 0, 或[]. 我正在传递变量，但没有记录错误。

https://handlebarsjs.com/guide/builtin-helpers.html

我已经被这个问题困住了很长一段时间。请在下面的代码中查看我的评论。

路线：

const express = require("express");
const router = express.Router();
const todosController = require("../controllers/todos");

router.get("/", todosController.getTodos);

router.post("/addTodo", todosController.addTodo);

module.exports = router;

控制器：

const Todo = require("../models/todos");

module.exports = {
  getTodos: async (req, res) => {
    // console.log(req.user);
    // console.log(req.user.googleId);
    try {
      const todoItems = await Todo.find({ googleId: req.user.googleId }); // get all todos that match googleId
      const itemsLeft = await Todo.countDocuments({
        googleId: req.user.googleId,
        done: false,
      }); // getting variables from google auth here
      console.log(itemsLeft);
      
      res.render("todos.hbs", {
        todo: todoItems, // Storing variables here and passing them on into hbs.
        left: itemsLeft,
        user: req.user,
      });
    } catch (err) {
      console.error(err);
    }
  },
  
  addTodo: async (req, res) => {
    // console.log(req.body.todoItem);
    try {
      await Todo.create({
        todo: req.body.todoItem,
        done: false,
        googleId: req.user.googleId,
      });
      console.log("To do has been added!");
      res.redirect("/");
    } catch (err) {
      console.error(err);
    }
  },
};

车把模板：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>To Do</title>
  </head>
  <body>
    <div class="container">
      <header class="flexContainer">
        <h1 class="title main-font center">Welcome {{user.displayName}}</h1> 
        {{!-- not rendering. Maybe I need to use lean()? --}}
      </header>

      <form class="center" action="/todos/addTodo" method="POST">
        <input type="text" placeholder="Add a To Do" name="todoItem" />
        <button type="submit" class="submitButton">
          <i class="fa fa-plus-square"></i>
        </button>
      </form>

      <div class="to-do-list flexContainer">
        <ul class="task-list center">
          {{#each todo}}
            {{#if todo.done}} // 
            <span class="complete">{{todo.todo}}</span>
            {{else}}
            <h1>unknown</h1>
            <span class="incomplete">{{todo.todo}}</span>
            {{/if}}
            <span class="fa fa-trash delete-todo"></span>
          {{/each}}
          </li>
        </ul>
      </div>

      <h4 class="main-font center">Left to do: {{left}}</h4>
    </div>
    <script type="text/javascript" src="/js/main.js"></script>
  </body>
</html>

应用程序.js

const path = require("path");
const express = require("express"); // handle CRUD api // <-- here
const exphbs = require("express-handlebars"); // <-- here
const mongoose = require("mongoose"); // talk to database
const dotenv = require("dotenv");
const morgan = require("morgan");
const passport = require("passport"); // handle all auth
const session = require("express-session"); // keep users logged in
const MongoStore = require("connect-mongo"); // pass session to database. Can get back in even if server restarts.
const connectDB = require("./config/db"); // how we connect to database

// Load config
// config.env is where all the global variables are stored.
dotenv.config({ path: "./config/config.env" });

// Passport config
require("./config/passport")(passport);

// This call connects to mongodb.
connectDB();

// Initialize app
const app = express();

// Body parser
// this allows us to look into data that was sent from forms
app.use(express.urlencoded({ extended: false }));
app.use(express.json());

if (process.env.NODE_ENV === "development") {
  app.use(morgan("dev"));
}

// Handlebars <-- here
app.engine(
  ".hbs",
  exphbs({
    defaultLayout: "main",
    extname: ".hbs",
  })
);
app.set("view engine", ".hbs"); // <-- here

// Sessions
app.use(
  session({
    secret: "keyboard cat",
    resave: false,
    saveUninitialized: false,
    store: MongoStore.create({ mongoUrl: process.env.MONGO_URI }),
  })
);

// Passport middleware
app.use(passport.initialize());
app.use(passport.session());

// Static folder
app.use(express.static(path.join(__dirname, "public")));

const PORT = process.env.PORT || 3000;

// Routes
app.use("/", require("./routes/index"));
app.use("/auth", require("./routes/auth"));
app.use("/todos", require("./routes/todos"));

app.listen(
  PORT,
  console.log(`Server running in ${process.env.NODE_ENV} mode on PORT ${PORT}`)
);

编辑：添加了我的文件夹结构

标签： javascriptexpresshandlebars.js

javascript - 即使我传入我的变量，车把也不会呈现

问题描述

解决方案

推荐阅读