【问题标题】:Jade list iteration with different content within内含不同内容的玉榜迭代
【发布时间】:2015-02-09 00:32:14
【问题描述】:

有没有办法遍历一个列表并在每个列表项中获取不同的内容?

我现在的情况是这样的:

ul.tabs
    li.tab-header-and-content
        a.tab-link(href="") Strategic overview
        .tab-content
            .col-4
                p Our world is changing fast. Global population is rising rapidly. There is growing pressure on resources. Rising energy prices and climate change have created a need for new lower carbon energy sources.
                p All of this is driving the transition towards a resource and energy efficient economy, and the chemical industry has a central role to play in enabling this shift.
                img(src="img/slide1.jpg", alt="")
            .col-4
                p Chemicals are the building blocks for our modern world. They are essential components in many of the products we use today and in the technologies that will drive us towards a more sustainable future.
                p At INEOS, sustainability is fundamental to how we do business. It is a key driver of innovation.
                p At the heart of the INEOS approach is our commitment to the principles of responsible care. These are central to the INEOS way of working and are put into practice every day across our business.
    li.tab-header-and-content
        a.tab-link(href="") Our approach
        .tab-content
            .col-4
                p Our approach to doing business drives efficiency, performance and sustainability across the Group. It helps us to stay reliable and competitive. It creates new opportunities to reduce energy and waste and encourages work in partnerships. Building positive relations with our local communities and making our company a great place to work also make good business sense; essential to ensuring the long-term success of our company.
                p Ultimately, sustainability is what we aim to achieve, by excelling at what we do and taking the greatest of care how we do it.
            .col-4
                .captioned-tile
                    a.link(href="") Interview with Jim Dawson
                    .image-holder
                        img(src="", alt="")
                    p Lorem ipsum dolor sit amet.

我尝试使用以下 mixin 提供一种更简单的方法,但我不知道如何处理内容块,因此它将在每个列表项中呈现不同的内容:

混合是:

mixin list(title)
  li.tab-header-and-content
    a.tab-link(href="")= title
    .tab-content
      block

我这样调用 mixin:

- var titles = ['Strategic Overview', 'Our approach']
each title in titles
  +list(title)
    p How do I put individual content in here?

结果是这样的:

<li class="tab-header-and-content"><a href="" class="tab-link">Strategic Overview</a>
  <div class="tab-content">
    <p>How do I put individual content in here?</p>
  </div>
</li>
<li class="tab-header-and-content"><a href="" class="tab-link">Our approach</a>
  <div class="tab-content">
    <p>How do I put individual content in here?</p>
  </div>
</li>

基本上,我需要为块传递一些特定的东西。

【问题讨论】:

    标签: javascript node.js iteration pug each


    【解决方案1】:

    与其使用基本数组,不如使用对象数组,如下所示:

    - var data = [
        {'title':'Strategic Overview', 'content':'Your content 1'},
        {'title':'Our approach', 'content':'Your content 2'}
    ]
    
    each item in data
      +list(item.title)
        p= item.content
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2018-02-17
      • 2019-10-26
      • 2016-01-16
      • 2013-11-15
      • 2014-06-18
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多