nunjucks 循环变量过滤器

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) 的方式很狂野、不安全且速度较慢，但​​可以使用任何用户提供的过滤器表达式