Question

var dataArr = [{
    name: 'name',
    value: 'lcat'
}, {
    name: 'score'
    value: '123.852',
    filter: 'round'
},{
    name: 'groups'
    value: [1,2,3,6,0],
    filter: 'sort'
}]

{% for data in dataArr %}
    <div>{{ data[value] | data.filter }}<div>
{% endfor %}

控制台错误：错误：找不到过滤器：data.filter。

如何编写循环？

Answer 1

（1）您可以使用if根据数据集中观察到的条件对循环进行分支。例如，此Nunjucks代码：

{% for data in dataArr %}
    {% if data.filter == 'round' %}
        <div>{{ data.value | round }}</div>
    {% elif data.filter == 'sort' %}
        <div>{{ data.value | sort }}</div>
    {% else %}
        <div>{{ data.value }}</div>
    {% endif %}
{% endfor %}

生成此html代码：

<div>lcat</div> <div>124</div> <div>0,1,2,3,6</div>

从您的数据集中。

你可以在这个jsFiddle中使用它：http://jsfiddle.net/xmojmr/gbLLryuz/

（2）或者您可以滚动自己的过滤器，它将采用数据集中定义的任意过滤器表达式字符串，并将代码（不受保护的）注入页面构建引擎（您可以读取一点点关于为什么故意允许代码注入在Wikipedia: Code injection）

不是一个好主意

例如，如果env变量的类型为Nunjucks.Environment，那么在运行JavaScript模板呈现代码之前添加以下过滤器

env.addFilter('eval', function(value, filterExpression) {
    return env.renderString(
        "{{ filterArgument | " + filterExpression + " }}",
        { filterArgument: value }
    );
});

允许使用简化的等效Nunjucks代码

{% for data in dataArr %}
    {% if data.filter %}
        <div>{{ data.value | eval(data.filter) }}</div>
    {% else %}
        <div>{{ data.value }}</div>
    {% endif %}
{% endfor %}

以上代码生成以下html代码：

<div>lcat</div> <div>124</div> <div>123.85</div> <div>0,1,2,3,6</div>

应用于下面的数据集时（注意新的 round（2））：

{
    name: 'name',
    value: 'lcat'
}, {
    name: 'score',
    value: '123.852',
    filter: 'round'
}, {
    name: 'score2',
    value: '123.852',
    filter: 'round(2)'
}, {
    name: 'groups',
    value: [1,2,3,6,0],
    filter: 'sort'
}

你可以在这个jsFiddle中使用它：http://jsfiddle.net/xmojmr/jkb7ry9x/1/

（1）的方式是安全且合理的快速但它假设您知道前面允许的自定义过滤器列表

（2）的方式是狂野的，不安全的并且速度较慢但允许使用任何用户提供的过滤器表达式

nunjucks循环变量过滤器

1 个答案: