5. 管道 -- Highway MVVM

5-1. 内建

5-1-1. lowercase

<!-- examples/pipes/lowercase.html --><p hi-bind="name | lowercase"></p><p>{{name | lowercase}}</p>

5-1-2. uppercase

<!-- examples/pipes/uppercase.html --><p hi-bind="name | uppercase"></p><p>{{name | uppercase}}</p>

5-1-3. number

<!-- examples/pipes/number.html --><span hi-bind="income | number: '2'"></span> // => 3500.00<span hi-bind="income | number: fixed"></span> // => 3500.000 when fixed value is 3

5-1-4. json

<!-- examples/pipes/json.html --><p hi-bind="user | json"></p> // => {"name": "highway", "license": "MIT"}<p>{{user | json}}</p> // => {"name": "highway", "license": "MIT"}

5-1-5. date

<!-- examples/pipes/date.html --><div hi-bind="user.birthday | date: 'yyyy-MM-dd hh:mm:ss'"></div><div hi-bind="user.birthday | date: format"></div>

5-1-6. limit

<!-- examples/pipes/limit.html --><ul>  <li hi-repeat="user in users | limit: 2">id: {{user.id}}, name: {{user.name}}</li></ul><ul>  <li hi-repeat="user in users | limit: limit">id: {{user.id}}, name: {{user.name}}</li></ul>

5-1-7. filter

<ul>  <li hi-repeat="user in users | filter: 'id' = '001' or 'name' *= 'j'">id: {{user.id}}, name: {{user.name}}</li></ul><ul>  <li hi-repeat="user in users | filter: 'name' ^= 'a' | filter: 'name' *= 'n' ">id: {{user.id}}, name: {{user.name}}</li></ul><ul>  <li hi-repeat="user in users | filter: 'name' *= contains">id: {{user.id}}, name: {{user.name}}</li></ul>

5-1-7-1. 匹配符

= 相等 == 严格相等 != 不相等 !== 严格不相等 ^= 开始于 $= 结束于 *=

5-1-7-1. 连接符

or 或者 and 不支持，通过多次filter实现

user in users | filter: ‘name’ ^= ‘a’ | filter: ‘name’ *= ‘n’为用户姓名以’a’开始并且（and）包含’n’的用户

5-1-8. sort

<ul>  <li hi-repeat="user in users | sort: 'name' 'asc'">id: {{user.id}}, name: {{user.name}</li></ul><ul>  <li hi-repeat="user in users | sort: sortBy ascBy">id: {{user.id}}, name: {{user.name}</li></ul>

5-2. 自定义

自定义管道是一个工厂函数

5-2-1. 入参

• source：源属性，income|number:fixed中source = {prop: ‘income’, watch: true, secure: true}
  
  • prop：源字段
  • watch：双向绑定，{{prop}}/{{{prop}}}为true，[[prop]]/[[[prop]]]为false
  • secure: 安全，{{prop}}/[[prop]]为true, {{{prop}}}/[[[prop]]]为false
• exp：表达式,income|number:fixed中exp = ‘fixed’
• pipeline:管道线，记录当前指令的所有管道实例，执行pipeline(oriValue)获取管道执行结果值
• update：更新函数，执行update更新执行展示
• $scope: 当前作用域
• $ctx: 上下文

5-2-2. 出参

• $mount：生命周期函数，挂载时执行
• iterator：迭代函数，接收上一个管道的结果值value，返回处理后的值
• $unmount：生命周期函数，销毁时执行

5-2-3. 全局

使用Highway.pipe定义，需指定宏指令名和宏指令工厂函数

5-2-4. 局部

指定视图中有效，通过$pipes指定，需指定宏指令名和宏指令工厂函数

5-2-5. 实例

自定义管道，将数值转化为百分比格式，调用格式为{{prop | percentage}}， percentage为管道名

const lowercase = function () {  return {    $iterator($value) {      if ($value == null) {        return $value;      }      return ($value + '').toLowerCase();    }  }};export default lowercase;