Filter

版权所有,转载请注明出处: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 %}
<!-- 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模板引擎的过滤器提供了更强大的扩展支持。

原文地址:https://www.cnblogs.com/riasky/p/3507592.html