## 过滤器
UOkay允许开发者自定义过滤器。过滤器的作用可以将数据按照开发者的意愿呈现。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
~~~
<div id = "app">
{{a|format}}
</div>
~~~
~~~
var app = new Okay({
ele:'app',
data: {
a:1
},
filters: {
format: function(value) {
return value==0?'$':'￥'
}
}
})
~~~
我们仅需在Okay的配置参数中配置filters对象即可。数据a将作为参数传入过滤器函数，上面的例子输出
~~~
<div>
￥
</div>
~~~
### 过滤器优先级
我们可以把过滤器看作与四则运算符相同的运算符。过滤器的优先级要高于四则运算符，低于()：
~~~
<div id = "app">
<p>{{1 + a|multi}}</p>
<p>{{(1 + a)|multi}}</p>
</div>
~~~
~~~
var app = new Okay({
ele:'app',
data: {
a:1
},
filters: {
multi:function (value){
return value *3
}
}
})
~~~
上述结果输出为：
~~~
<div id = "app">
<p>13</p>
<p>5</p>
</div>
~~~
这里需要注意的是对于UOkay,表达式的运算都是字符串的运算，所以{{1 + a|multi}}运算结果为:
~~~
'1' + a*3 = 13
~~~
### 过滤器参数
我们可以给过滤器添加额外的参数，参数在过滤器用逗号隔开：
~~~
<div id = "app">
<p>{{a|format,2}}</p>
</div>
~~~
~~~
var app = new Okay({
ele:'app',
data: {
a:1.1
},
filters: {
format:function (value,accur){
return value.toFixed(accur)
}
}
})
~~~
由上例可以看出，UOkay会将变量和逗号隔开的参数的所有参数依次传入过滤器，上例的输出结果：
~~~
<div>
<p>1.10</p>
</div>
~~~
### 多变量过滤器
有时我们可能需要多个个变量同时决定数据的呈现，我们可以使一个变量作为主变量，其他变量作为参数构建过滤器：
~~~
<div id = "app">
<p>{{a|format,b}}</p>
</div>
~~~
~~~
var app = new Okay({
ele:'app',
data: {
a:1,
b:2
},
filters: {
format:function (value1,value2){
return value1>value2?'a>b':'a<b'
}
}
})
~~~
值得注意的是，UOkay不仅仅会对主变量进行监听，同时也会对参数变量进行监听。如上例，当a,b变量任意一个变量发生变化时，相应的视图都会发生更新。
### 过滤器链
UOkay的设计原则是尽可能的符合单一原则及一个函数或对象实现单一的功能，过滤器也同样的道理，变量将一次通过过滤器链，最终呈现出视图结果。
~~~
<div id = "app">
<p>{{b|format,2|unit,a}}</p>
</div>
~~~
~~~
var app = new Okay({
ele:'app',
data: {
a:1,
b:2.1
},
filters: {
format:function (value,accur){
return value.toFixed(accur)
},
unit:function (value,desc) {
if(desc == 0) {
return '$' + value
}else {
return '￥' + value
}
}
}
})
~~~
上例输出结果：
~~~
<div id = "app">
<p>￥2.10</p>
</div>
~~~
