1 
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。

如何编写循环？

4

1 回答 1

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)或者您可以滚动您自己的过滤器，它将采用数据集中定义的任意过滤器表达式字符串并将代码（未受保护的）注入页面构建引擎（您可以阅读一些关于为什么故意允许代码注入不是好主意在维基百科：代码注入）

例如，如果env变量是Nunjucks.EnvironmentJavaScript类型，则在运行模板渲染代码之前添加以下过滤器

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

于 2014-12-08T20:33:28.947 回答