首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >即使我正在传递变量,也不呈现车把。

问即使我正在传递变量,也不呈现车把。
EN

Stack Overflow用户
提问于 2021-09-11 00:00:12
回答 1查看 539关注 0票数 0

我正在创建一个待办事项列表,但我的把手没有呈现。我正在使用护照谷歌auth,我相信我是存储我的变量在我的评论下面。我也在使用mongodb,当我添加todos时,它们被存储在数据库中。

根据hbs文档,if块不会呈现if参数返回false、undefined、null、""、0或[]。我正在传递变量,但没有记录错误。

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

我在这个问题上被困了一段时间了。请参阅下面代码中的我的评论。

路由:

代码语言:javascript
复制
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;

主计长:

代码语言:javascript
复制
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);
    }
  },
};

车把模板:

代码语言:javascript
复制
<!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

代码语言:javascript
复制
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}`)
);

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

​

​

EN

回答 1

Stack Overflow用户

发布于 2022-06-14 00:13:43

您可能缺少到车把JavaScript的前端链接。

代码语言:javascript
复制
<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>

如果需要,可以下载JavaScript文件并在项目中本地引用它。希望能帮上忙。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/69139017

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档