Filter - Surge.js模板引擎过滤器
版权所有，转载请注明出处：http://guangboo.org/2014/01/05/filter-surgejs-template-engine
过滤器在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 %}
{% elif value|length > 10 %}
{% endif %}
或者
{% with len = value|length %}
{% if len > 100 %}
{% elif len > 10 %}
{% 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模板引擎的过滤器提供了更强大的扩展支持。