类型转换器

由于我们从表单元素拿到的所有东西都是字符串或字符串数组, 因此从avalon0.*起就提供了几个ms-duplex的辅助指令来实现数据类型转换功能

格式为ms-duplex-xxxx

默认提供了4个数据转换器

  • ms-duplex-string

  • ms-duplex-number

  • ms-duplex-boolean

  • ms-duplex-checked

具体用法详见双工绑定

  1. <input ms-duplex-number='@aaa'>{{@aaa}}

我们也可以自定义类型转换器, 直接在avalon.parser上添加

  1. parsers: {
  2.     number: function (a) {
  3.         return a === '' ? '' : /\d\.$/.test(a) ? a : parseFloat(a) || 0
  4.     },
  5.     string: function (a) {
  6.         return a === null || a === void 0 ? '' : a + ''
  7.     },
  8.     boolean: function (a) {
  9.         if(a === '')
  10.             return a
  11.         return a === 'true'|| a == '1'
  12.     }
  13. },

上面number, string, boolean就是ms-duplex-xxx的实际转换方法, a为元素的value值. ms-duplex-checked比较特殊它是使用checked属性,因此不在其列.

上面number, string, boolean就是ms-duplex-xxx的实际转换方法, a为元素的value值. ms-duplex-checked比较特殊它是使用checked属性,因此不在其列.

我们看一下转换器的用法。

  1.   <div ms-controller="test">
  2.       <input type="checkbox" value="1" ms-duplex="@aaa">
  3.       <input type="checkbox" value="2" ms-duplex="@aaa">
  4.       <input type="checkbox" value="3" ms-duplex="@aaa">
  5.       <p>{{@aaa}}</p>
  6.   </div>
  7.   <script>
  8.   var vm = avalon.define({
  9.       $id: 'test',
  10.       aaa: [1, 2]
  11.   })
  12.   </script>

如果不使用ms-duplex-number转换器，最开始时，第一个，第二个checkbox是能正确选中，但当我们点击第二个时，发现下面的文本没有变化。 因此我们是尝试从[1,2]数组中移除"2"这个字符串，当然移除不了，没有效果。

当我们改成这样

  1. <input type="checkbox" value="1" ms-duplex-number="@aaa">
  2. <input type="checkbox" value="2" ms-duplex-number="@aaa">
  3. <input type="checkbox" value="3" ms-duplex-number="@aaa">

点击第二个checkbox时，它会转换出input.value的“2”,然后再用avalon.parsers.number转换成数字，就能成功移除，于是文本就会变化。