Filter - Surge.js模板引擎过滤器

过滤器在surge.js模板引擎中多处用到，其类似于javascript的函数，只是在surge.js模板引擎中使用的语法稍有不同，surge.js模板引擎会将过滤器解析成javascript的函数，并且这个函数至少要有一个参数，该参数就是要“过滤”的数据，其他参数则是“过滤”时所需要的参数。

语法

surge.js模板引擎的过滤器的语法，如下：

data|filter_name:arg1, arg2

data为要“过滤”的数据

filter_name为过滤器名称，其实就是预定义的javascript函数

arg1, arg2为“过滤”数据时所需要的参数。

示例中的代码在surge.js模板引擎解析时，将被解析成如下javascript代码：

_.filter_name(data, arg1, arg2)

其中“_”是存储过滤器的“容器”，surge.js模板引擎内置的过滤器和用户自定义的过滤器都存储在这里。

使用范围

过滤器在surge.js模板引擎中多处使用，既可以在数据输出时使用，如：

{{ value|truncate:20 }}

也可以在流程控制块中对数据处理，如：

{% if value|length > 100 %}

<!-- html code -->

{% elif value|length > 10 %}

<!-- html code -->

{% endif %}

或者

{% with len = value|length %}

{% if len > 100 %}

<!-- html code -->

{% elif len > 10 %}

<!-- html code -->

{% endif %}

{% endwith %}

或者：

{% for item in value|sort:"name" %}

html code

{% endfor %}

嵌套

目前surge.js模板引擎支持过滤器的嵌套，例如：

{{ post.title|truncate:20|title }}

示例中的例子是将post.title的值，截取20个字符，然后再将截取后的数据已标题格式输出，surge.js模板引擎将其解析成javascript代码，如下：

_.title(_.truncate(post.title, 20))

限制

surge.js模板引擎允许将变量作为过滤器的参数，如：

{{ post.title|truncate:post.titlesize }}

但是，如果你想使过滤器的参数也能使用过滤器的话，将不会得到你想要的结果，因为这会产生歧义，如：

{{ post.title|truncate:post.titlesize|add:10 }}

也许你的本意是：

_.truncate(post.title, _.add(post.titlesize, 10))

但是实际的效果却是：

_.add(_.truncate(post.title, post.titlesize), 10)

也许你觉得添加括号也许能解决问题，如：

{{ post.title|truncate:(post.titlesize|add:10) }}

只可惜目前surge.js模板引擎还不支持这样的语法，不过之后的版本也许会支持。

自定义过滤器

surge.js模板引擎内置提供了一些常用的过滤器，同时还支持用户自定义过滤器，要了解内置的过滤器，可以查看其文档：http://guangboo.github.io/surge.js/tutorial.html#builtinfilters。surge.js模板引擎的过滤器实际就是javascript函数，该函数只是需要一个参数，只有您会编写javascript函数，您就能自定义surge.js模板引擎的过滤器，surge.js模板引擎提供了注册自定义过滤器的接口：

surge.register(name, function)

如下注册一个自己的过滤器示例：

surge.register('sum', function(a) {

    var s = 0;

    for(var i = 0; i < a.length; i++) {

        s += a[i];

    }

    return s;

}).register('arg', function(a) {

    return surge.__builtins.sum(a) / a.length;

});

总结

过滤器是surge.js模板引擎中非常重要的功能，在数据输出、数据格式化、数据预处理等方面起到相当大的作用，并且允许用户自定义过滤器，且过滤器的定义如同编写javascript函数一样简单，这为surge.js模板引擎的过滤器提供了更强大的扩展支持。