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型再加入FO点点llowing滤波器运行JavaScript模板呈现代码之前

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

使得能够使用简化的等效Nunjucks代码

​​

以上代码生成以下html代码：当施加到

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

下面的数据集（注意新的回合（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）是野生的，不安全的和较慢的，但允许使用任何用户提供的过滤器表达式的