javascript - Jade 表迭代，其中包含不同的内容

Question

有什么方法可以迭代列表并在每个列表项中获取不同的内容吗？

我现在拥有的是这样的:

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 找到一种更简单的方法，但我不知道如何处理内容 block ，以便它将在每个列表项中呈现不同的内容:

混合是:

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>

基本上，我需要传递该 block 的特定内容。

Answer 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