如何在Jade中動態創建行？

現在我有這樣的：如何在Jade中動態創建行？

- count = 0 
- each organization in organizations 
    if (count == 0 || count % 3 == 0) 
     .row 
    .col-md-4 
     a(href="#{organization.url}" target="_blank") 
      .fancyy-box 
       h3= organization.name 
       img(src="/images/organizations/#{organization.logo}") 
       p= organization.mission 
- count = count + 1

我所試圖做的是開始一個新的行每三個組織，使我得到：

<div class="row"> 
    <div class="organization">...</div> 
    <div class="organization">...</div> 
    <div class="organization">...</div> 
</div> 
<div class="row"> 
    <div class="organization">...</div> 
    <div class="organization">...</div> 
    <div class="organization">...</div> 
</div> 
// and so on...

現在我getteing：

<div class="row" /> 
<div class="organization">...</div> 
<div class="organization">...</div> 
<div class="organization">...</div> 
<div class="row" /> 
<div class="organization">...</div> 
<div class="organization">...</div> 
<div class="organization">...</div> 
<div class="row" />

有沒有簡單的方法來實現這個目標？

來源

2014-03-06 drewwyatt

玉雕作品。在每行之後移動一個標籤。 –

@MukeshSoni可能在'row'的if語句中包含'organization'輸出。儘管如此，ztirom提供的解決方案正是我所期待的。 – drewwyatt

像Mukesh Soni說你需要考慮你的縮進。但這只是你問題的一部分，我承認的第二件事是你的條件陳述和你的循環。我編輯這有點像你可以看到如下：

- for (var j = 0; j < organizations.length; j++) 
    if (j == 0 || j % 3 == 0) 
    .row 
     - for (var i = j; i < (3 + j); i++) 
     - if (i >= organizations.length) break; 
      .col-md-4 
      a(href="#{organizations[i].url}" target="_blank") 
       .fancyy-box 
       h3= organizations[i].name 
       img(src="/images/organizations/#{organizations[i].logo}") 
       p= organizations[i].mission

所以在第一for循環，我只是張貼迭代的每三次row，在第二for環路我添加數據，只需添加3行/格。如果i變大，那麼您的數據 - 它會中斷。

下面的例子：第一個我的數據

{ 
    organizations: [ 
    {name: 'demo1', url: 'example.com', logo: 'pic1.jpg', mission: '1'}, 
    {name: 'demo2', url: 'anotherexample.com', logo: 'pic2.jpg', mission: '2'}, 
    {name: 'demo3', url: 'justanotherexample.com', logo: 'pic3.jpg', mission: '3'}, 
    {name: 'demo4', url: 'wowjustanotherexample.com', logo: 'pic4.jpg', mission: '4'}] 
}

現在的HTML輸出：

<div class="row"> 
    <div class="col-md-4"> 
    <a href="example.com" target="_blank"> 
     <div class="fancyy-box"> 
     <h3>demo1</h3><img src="/images/organizations/pic1.jpg"/> 
     <p>1</p> 
     </div> 
    </a> 
    </div> 
    <div class="col-md-4"> 
    <a href="anotherexample.com" target="_blank"> 
     <div class="fancyy-box"> 
     <h3>demo2</h3><img src="/images/organizations/pic2.jpg"/> 
     <p>2</p> 
     </div> 
    </a> 
    </div> 
    <div class="col-md-4"> 
    <a href="justanotherexample.com" target="_blank"> 
     <div class="fancyy-box"> 
     <h3>demo3</h3><img src="/images/organizations/pic3.jpg"/> 
     <p>3</p> 
     </div> 
    </a> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-md-4"> 
    <a href="wowjustanotherexample.com" target="_blank"> 
     <div class="fancyy-box"> 
     <h3>demo4</h3><img src="/images/organizations/pic4.jpg"/> 
     <p>4</p> 
     </div> 
    </a> 
    </div> 
</div>

來源

2014-03-06 11:11:41 ztirom

它延長了一些時間來編輯我的答案，第一次編輯不是問題的作者搜索的內容。我很抱歉，它爲了修復這個問題多了一秒鐘。 – ztirom

我還沒有嘗試過，但看過之後，它看起來應該像冠軍一樣工作。萬分感謝！ – drewwyatt

這個答案不是最優雅的IMO - 它對循環使用有些複雜，並且答案中的實際json數據是無效的json。這裏的迭代感覺很笨拙。我在這裏解答了這個問題：http://stackoverflow.com/questions/13114489/nested-jade-via-conditional-logic/13154451#comment57248450_13154451 – sofly

您可以通過壓痕做到這一點

.row 
    each organization, i in organizations 
    if i > 0 && i % 3 === 0 
     // jade/pug can interpret html 
     </div><div class="row"> 
     // past you col template here 
     .col-md-4 
     a(href="#{organizations[i].url}" target="_blank") 
      .fancyy-box 
     ...

來源

2016-10-16 15:02:39

如何在Jade中動態創建行？

回答

相關問題