如何使用 Jade 渲染 3 个最新的 Mongo 项目答案

【问题标题】：How to render 3 most recent Mongo items using Jade如何使用 Jade 渲染 3 个最新的 Mongo 项目
【发布时间】：2014-03-31 20:45:02
【问题描述】：

我正在使用 node、mongo 和jade 构建一个应用程序，它允许我将项目添加到数据库中，然后使用jade 在页面上呈现这些项目。这是一个内容站点，因此我只希望在页面上呈现三个最新的数据库项。当我在jade中使用for循环时，它会遍历整个数据库并为数据库中的每个项目创建一个新的DOM元素。这是我目前使用的代码：

for item in docs
            div(class='item')
                div(class='overlayHover')
                div(class='protectLink')
                    a(class='readMore' href='#') READ MORE
                    div(class='overlayText')
                        h3 #{item.description}
                img(class='triImage' src='http://cdn.modernfarmer.com/wp-content/uploads/2014/01/ChiangMai10.jpg')
            div(class='item')
                div(class='overlayHover')
                div(class='protectLink')
                    a(class='readMore' href='#') READ MORE
                    div(class='overlayText')
                        h3 #{item.description}
                img(class='triImage' src='http://media-cache-ak0.pinimg.com/236x/6e/f1/82/6ef182a1085c987bf8143d9b2d4ea42b.jpg')
            div(class='item')
                div(class='overlayHover')
                div(class='protectLink')
                    a(class='readMore' href='#') READ MORE
                    div(class='overlayText')
                        h3 #{item.description}
                img(class='triImage' src='http://cdn.shopify.com/s/files/1/0257/8507/products/warren-keelan-surf-photo13sq_medium.jpg?v=1395110040')

我不认为 for 循环是我正在寻找的。我希望修复这三个元素，唯一改变的是它们的 item.description。

为了从我的 mongo 数据库中仅提取三个最近的项目，我应该查看一个特定的玉方法吗？

请告诉我。谢谢。

【问题讨论】：

Jade 没有从 MongoDB 中提取任何内容。它只是显示您传递给它的内容。如果您想对数据进行限制和排序，请更改您的 MongoDB 查询或在将文档数组传递给 Jade 之前对其进行预处理。
啊，这很有意义。是否可以将多个对象发送到玉？例如 res.render('index' , {docs:docs, items:items})?
@user3294779 是的，这样就可以了。更一般地说，如果您只选择您想要的三个元素，或者将数组（例如使用切片）截断为三个元素，然后在 Jade 中使用 for 循环，我认为您将拥有更方便的维护。它会干净得多。在如此简洁的模板语言中存在冗余也有点讽刺。 :-)

标签： node.js mongodb pug

【解决方案1】：

就像Amberlamps 提到的那样，最好只将 3 个最近的对象传递给您的模板，但是您的 for each 循环会突然发布 9 次，它应该看起来更像：

for item in docs
  div(class='item')
    div(class='overlayHover')
    div(class='protectLink')
      a(class='readMore' href='#') READ MORE
      div(class='overlayText')
        h3 #{item.description}
  img(class='triImage' src='http://cdn.modernfarmer.com/wp-content/uploads/2014/01/ChiangMai10.jpg')

但是，如果您仍然想在 Jade 中处理您的问题，这里有一个快速演示，其中包含一个现在适合您的示例：

- for(var i = docs.length-1; i >= docs.length-3; i--)
  div(class='item')
    div(class='overlayHover')
    div(class='protectLink')
      a(class='readMore' href='#') READ MORE
      div(class='overlayText')
        h3 #{docs[i].description}
    img(class='triImage' src='http://cdn.modernfarmer.com/wp-content/uploads/2014/01/ChiangMai10.jpg')

我刚刚添加了一个新的for 循环。这不会做任何其他事情，因为从您传递的元素中的最后一项开始并向后发布您的数据。

这是我的示例数据：

{
  docs: [
    {description: '1 Demo'},
    {description: '2 Demo'},
    {description: '3 Demo'},
    {description: '4 Demo'},
    {description: '5 Demo'}
  ]
}

这里是最终结果：

<div class="item">
  <div class="overlayHover"></div>
  <div class="protectLink"><a href="#" class="readMore">READ MORE</a>
    <div class="overlayText">
      <h3>5 Demo</h3>
    </div>
  </div><img src="http://cdn.modernfarmer.com/wp-content/uploads/2014/01/ChiangMai10.jpg" class="triImage"/>
</div>
<div class="item">
  <div class="overlayHover"></div>
  <div class="protectLink"><a href="#" class="readMore">READ MORE</a>
    <div class="overlayText">
      <h3>4 Demo</h3>
    </div>
  </div><img src="http://cdn.modernfarmer.com/wp-content/uploads/2014/01/ChiangMai10.jpg" class="triImage"/>
</div>
<div class="item">
  <div class="overlayHover"></div>
  <div class="protectLink"><a href="#" class="readMore">READ MORE</a>
    <div class="overlayText">
      <h3>3 Demo</h3>
    </div>
  </div><img src="http://cdn.modernfarmer.com/wp-content/uploads/2014/01/ChiangMai10.jpg" class="triImage"/>
</div>

【讨论】：