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 に答える