我正在创建一个待办事项列表,但我的把手没有呈现。我正在使用护照谷歌auth,我相信我是存储我的变量在我的评论下面。我也在使用mongodb,当我添加todos时,它们被存储在数据库中。
根据hbs文档,if块不会呈现if参数返回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>app.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}`)
);编辑:添加了我的文件夹结构

发布于 2022-06-14 00:13:43
您可能缺少到车把JavaScript的前端链接。
<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>如果需要,可以下载JavaScript文件并在项目中本地引用它。希望能帮上忙。
https://stackoverflow.com/questions/69139017
复制相似问题