车把，{{#each posts}}消失博客页面

Question

我正在尝试将博客网站改为动态的。 为此，我使用 mongoDb 和handlebars

{{#each ArrayName}}

将其更改为动态网站。 当我尝试使用从 mongoDb 获取的数据并应用车把代码

{{#each ArrayName}}

时，主体代码消失了。但如果我使用静态数据，它将显示在页面中。这是我的车把代码，在

class="row"

之后，我使用了它。

                <div class="row">
                    {{#each Posts}}
                    <div class="col-md-6">
                        <div class="blog">
                            <div class="blog-img">
                                <img src="img/blog2.jpg" class="img-fluid">
                            </div>
                            <div class="blog-content">
                                <ul class="blog-meta">
                                    <li><i class="fas fa-users"></i><span class="writer">John Doe</span></li>
                                    <li><i class="fas fa-clock"></i><span class="writer">{{date}}</span></li>
                                    <li><i class="fas fa-comments"></i><span class="writer">13</span></li>
                                </ul>
                                <h3>{{title}}</h3>
                                <p>{{content}}</p>
                                <a href="blog-single.html">Read More</a>
                            </div>
                        </div>
                    </div>
                    {{/each}}
                </div>

这是我来自sampleData.js的一个示例

Post.create({
    title: "First post entry.",
    content: "This is the first content of post."
}, 
    (error,post) => {
    console.log(error,post)
})

这是 Post.js 代码，

const PostSchema = new mongoose.Schema ({
    title: {type: String, require: true},
    content: {type: String, rqeuire: true},
    date: { type: Date, default: Date.now}
})

最后，这是我的路线代码，

router.get("/blog" , (req,res) => {
    Post.find({}).then(posts =>{
        res.render("site/blog", {posts:posts})
    })
})

当我使用静态数据时，为什么我会在页面中看到帖子， 当我使用动态数据时，为什么我看不到页面中的帖子？

Answer 1

更新您的路线以将

async/await

与

Model.find().lean()

一起使用，如下所示：

router.get("/blog" , async (req,res) => { //< Note the use of async keyword
   try{
      const posts = await Post.find({}).lean(); //< Note the use await keyword
      res.render("site/blog", {
         posts:posts
      });    
   } catch(err){
      console.log(err);
      //Handle error
   }
})

使用把手

{{#each}}

帮助器时，需要使用

this

关键字来引用正在迭代的元素。例如

{{this.title}}

或

{{this.content}}

，因此请像这样更新您的模板：

<div class="row">
 {{#each posts}}
    <div class="col-md-6">
       <div class="blog">
          <div class="blog-img">
             <img src="img/blog2.jpg" class="img-fluid">
          </div>
          <div class="blog-content">
             <ul class="blog-meta">
                <li><i class="fas fa-users"></i><span class="writer">John Doe</span></li>
                <li><i class="fas fa-clock"></i><span class="writer">{{this.date}}</span></li>
                <li><i class="fas fa-comments"></i><span class="writer">13</span></li>
             </ul>
             <h3>{{this.title}}</h3>
             <p>{{this.content}}</p>
             <a href="blog-single.html">Read More</a>
          </div>
       </div>
    </div>
 {{/each}}
</div>

正如 @76484 的评论中提到的，请确保在车把模板中使用

posts

而不是

Posts

来循环遍历

posts

数组。