文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用Jade渲染3个最新的Mongo项目

问如何使用Jade渲染3个最新的Mongo项目
EN

Stack Overflow用户

提问于 2014-04-01 04:45:02

回答 1查看 144关注 0票数 1

我正在构建一个包含node、mongo和jade的应用程序，它允许我将项添加到数据库中，然后使用jade将这些项呈现在页面上。这是一个内容站点，所以我只希望在页面上呈现三个最新的数据库项。当我在jade中使用for循环时，它遍历整个数据库，并为db中的每一项创建一个新的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方法？

请让我知道。谢谢。

pug

node.js

mongodb

回答 1

Stack Overflow用户

发布于 2014-04-01 17:01:49

就像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>

票数 0

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

原文链接：

https://stackoverflow.com/questions/22771814

复制

相似问题

问如何使用Jade渲染3个最新的Mongo项目
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用Jade渲染3个最新的Mongo项目EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用Jade渲染3个最新的Mongo项目
EN