如何在 Jade 中重复 Bootstrap 个容器？

Question

我有 JSON 数据从 Express 和 Mongoose Stack 发送，以供在 Jade 中编程的 UI 呈现。我应该使用什么 Jade Construct 来使用 Jade 语法重复 col-md-4 的 Bootstrap 容器。

目前我的翡翠代码如下，

 if deal
each item in deal
  .col-sm-6.col-md-4
    .thumbnail
      img(alt='100%x200', src='#{item.image_url}', style='height: 250px; width: 100%;')
      .caption

        h3 
          | #{item.brand_id}

但是我得到一个错误，

Cannot read property 'image_url' of undefined

我的JSON数据是这样发送的，

Deal.find(function(err, result){
    if(err) return console.log("Error" + err);
    res.render('home',{deal:result});

});

从以 JSON 格式提供的内容中重复数据块的可能解决方案是什么？

Answer 1

您的代码似乎是正确的，请确保 'deal' 确实填充了正确的数据。这是一个工作示例：

- var list = [{x: 123, y: 234}, {x: 123, y: 234}];
each item in list
  .col-sm-6.col-md-4
    .thumbnail
      img(alt='100%x200', src='#{item.x}', style='height: 250px; width: 100%;')
      .caption

        h3
          | #{item.y}

输出：

<div class="col-sm-6 col-md-4">
  <div class="thumbnail"><img alt="100%x200" src="123" style="height: 250px; width: 100%;"/>
    <div class="caption">
      <h3>234</h3>
    </div>
  </div>
</div>
<div class="col-sm-6 col-md-4">
  <div class="thumbnail"><img alt="100%x200" src="123" style="height: 250px; width: 100%;"/>
    <div class="caption">
      <h3>234</h3>
    </div>
  </div>
</div>

如何在 Jade 中重复 Bootstrap 个容器？

How to Repeat Bootstrap Containers in Jade?

javascript

json

node.js

express

pug