Question

我有一份包含以下内容的文档：

---
layout: default
title: "A Gallery"
image:
    - "image-1.jpg"
    - "image-2.jpg"
    - "image-3.jpg"
---

现在我想在我的默认模板中构建一个图像列表。

<ul>
    <li><img src="image-1.jpg" alt=""></li>
    <li><img src="image-2.jpg" alt=""></li>
    <li><img src="image-3.jpg" alt=""></li>
</ul>

我发现了tutorial for javascript loops。

但是如何将其转换为ECO / Coffeescript？

这样的东西？

<ul>
<% gallery i + 1, for images i in @document.image[i]: %>
  <li><%- @document.image[i] %></li>
<% end %>
</ul>

Answer 1

这就是我做到的。

在docpad.coffee文件中：

site:
  pics:
    myFirstGallery: [
      {name: '/images/mypic.png' h: '180px' w: '100px'},
      {name: '/images/mypic2.png' h: '180px' w: '100px'}
    ]

然后在您的eco文件中：

<ul>
  <% for pic in @document.site.pics.myFirstGallery: %>
    <li>
      <img src="#{pic.name}" width="#{pic.w}" height="#{pic.h}" />
    </li>
  <% end %>
</ul>

应该是类似的东西。我使用Jade，所以我忘记了确切的CoffeeScript语法。如果我出错了，请告诉我。 for in语法来自CoffeeScript's网站。我在Eco's ReadMe文件上查了一下。

Answer 2

我在»The Little Book on CoffeeScript« (GitHub Version)中看到此代码后想出来了。

for name, i in ["Roger the pickpocket", "Roderick the robber"]
  alert "#{i} - Release #{name}"

对于上面的示例（请参阅我的问题），您必须编写此代码。

<ul>
  <% for image, i in @document.image: %>
    <li>
       <img src="<%- "#{image}" %>" />
    </li>
  <% end %>
</ul>

现在它就像魅力一样。

如何通过DocPad中的ECO输出数组来构建图像库？

2 个答案: