如何在 Jade 中重复引导容器？答案

【问题标题】：How to Repeat Bootstrap Containers in Jade?如何在 Jade 中重复引导容器？
【发布时间】：2015-04-16 19:55:49
【问题描述】：

我有从 Express 和 Mongoose Stack 发送的 JSON 数据，用于为 Jade 编程的 UI 渲染。我应该使用什么 Jade Construct 来使用 Jade 语法重复 col-md-4 的引导容器。

目前我的翡翠代码如下，

 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 格式提供的内容中重复数据块的可能解决方案是什么？

【问题讨论】：

您是否尝试过实际定义item？
没有。 deal 是一个 JSON 数组对象，对于这个数组对象的每次迭代我都想重复上面的块。
如果 deal 确实是一个对象数组，那么您的代码应该可以正常工作。
@NitsanBaleli 我已经编辑以显示服务器端发送数据的方式。让我试一次。谢谢！ :)

标签： javascript json node.js express pug

【解决方案1】：

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

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

【讨论】：

这很有魅力！非常感谢！ :D