将数据传递给部分时，车把呈现空元素答案

【问题标题】：Handlebars rendering empty elements when data is passed to partial将数据传递给部分时，车把呈现空元素
【发布时间】：2021-09-02 02:30:23
【问题描述】：

我在这个问题上被困了一段时间，不知道该怎么办了。我将数据存储在 mongoDB 中，我要做的就是将数据渲染到我创建的部分中。我删除了部分中的所有内容，但仍然遇到这个问题，所以我认为它在检索数据并循环它的某个地方

问题一：我渲染内容的时候会渲染，但是我也会有5-6个空元素，不管是p标签，h1，img等

问题 2：当我向 img 标签添加一个类时，它被用作空标签的 src 应用js：


const bodyParser = require('body-parser')
const { Console } = require('console')
require('dotenv').config()
const express = require('express')
const mongoose = require('mongoose')
const app = express()
const exphbs = require('express-handlebars')
const path = require('path')
const indxRoutes = require('./routes/index')

//Templataing engine
app.engine('handlebars', exphbs({defaultLayout: 'layout'}))
app.set('view engine', 'handlebars');
app.use(express.static(path.join(__dirname, '/public')));

app.use(indxRoutes)

mongoose.connect(process.env.DB_CONNECTION, () => {
    console.log('database connected')
})





app.listen(3000)

我的路线：

var express = require('express')
var router = express.Router()
var Product = require('../models/product')

router.get('/', (req, res) => {
    Product.find((err, docs) => {
        console.log(docs)
        if(err){
            res.send('error')
        }
        res.render('index', { products: docs})
    })
})

module.exports = router;

我现在删除的部分：


{{# each products}}
    {{# each .}}
 
        {{this.title}}
        {{this.description}}
        {{this.price}}
        
        <img src={{this.imagePath}} class="card-img">
      

    {{/each}}
    
{{/each}}

问题是，这行得通，但我也得到了 5-6 个看起来像这样的空 img 标签

<img src="class="card-img"">

如果我创建另一个元素，如 p、h1 等，我会得到 5-6 个空标签

我真的希望这是有道理的。感谢您的所有帮助。

【问题讨论】：

标签： node.js handlebars.js templating

【解决方案1】：

所以我想通了。基本上，我将从 mongo db 接收到的数据发送到模板，但我这样做了：

router.get('/', (req, res) => {
    Product.find((err, docs) => {
        let newDocs = JSON.stringify(docs)
        console.log(newDocs)
        let newDocss = JSON.parse(newDocs)
        console.log(newDocss)
        res.render('index', { products: newDocss})
    })
})

我在控制台记录了每一步。本质上只是 strinigfy 和 parse 并且它起作用了。我希望我能给出更详细的答案，但我还在学习中。

我的猜测是 mongoDB 将数据存储在 BSON 中。通过使用 stringify，它被转换为 JSON，然后解析 JSON 数据，我们可以得到一个我们可以使用的数组。

谁能确认这是否是正确的想法？

【讨论】：