Question

我在从Nunjucks {% for %}循环中获取数组中项目的索引时遇到了一些麻烦。

我定位的数组很简单，看起来像这样

pages[1,2,3]

这是Nunjucks循环

{% for i,p in data.tickets.pages %} {{ i }} : {{ p }} {% endfor %}

问题

{{ p }}输出1,2,3，但{{ i }}不输出任何内容。

如果有人能告诉我如何解决这个问题，我会非常感激。提前谢谢！

Answer 1

简单地nunjucks等待array的单个迭代器。当您使用多重迭代器并传递array时，nunjucks会按迭代器集拆分每个array元素。

{% set pages = [[10, 11], [12, 13]] %}
{% for a, b in pages %}
{{a}},{{b}}
{% endfor %}
---
10:11
12:13

您可以使用range，将数组转换为对象（元素顺序可能丢失）或使用loop.index0'/ loop.index

var nunjucks  = require('nunjucks');
var env = nunjucks.configure();

// range
var res = nunjucks.renderString(`
    {% for i in range(0, items.length) %}
    {% set item = items[i] %}
    {{i}}: {{item}}
    {% endfor %}`, 
    {items: [10, 12]}
);

console.log(res);

// array to object
res = nunjucks.renderString(`
    {% for i, item in items %}
    {{i}}: {{item}}
    {% endfor %}`, 
    {items: Object.assign({}, [10, 12])}
);

console.log(res);

// loop.index0
res = nunjucks.renderString(`
    {% for item in items %}
    {{loop.index0}}: {{item}}
    {% endfor %}`, 
    {items: [10, 12]}
);

console.log(res);

Answer 2

对于任何通过 Google 或其他方式来到这里的人。我能够直接在我的模板中使用上述带有范围循环的方法，甚至嵌套循环。

这是我直接在 nunjucks 模板中的部分代码：

<ul class="index">
    {% for x in range(0, dbReport.sections.length) %}
        {% set section = dbReport.sections[x] %}
        <li>
            <strong>{{ x + 1 }}</strong> {{ section.sectionTitle }}
            <ul>
                <li>
                    <strong>{{ x + 1 }}.1</strong> Section components:
                    <ul>
                        {% for y in range(0, section.subSections.length) %}
                            {% set subSection = section.subSections[y] %}
                            <li>
                                <strong>{{ x + 1 }}.1.{{ y + 1 }}</strong> {{subSection.subSectionTitle}}
                            </li>
                        {% endfor %}
                    </ul>
                </li>
            </ul>
        </li>
    {% endfor %}
</ul>

Answer 3

与array.entries()

{%- for pageIndex, page in collections.pages.entries() -%}
  <div class="page" id="page-{{ pageIndex + 1 }}">
    {{ page.templateContent | safe }}
  </div>
{%- endfor -%}

使用Nunjucks for循环无法获取数组中的项目索引

3 个答案: