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;