双工绑定
双工绑定是MVVM框架中最强大的指令.react推崇单向数据流,没有双工绑定, 那么需要rudex等额外的库来实现相同的功能.
双工绑定只要用于表单元素上.或当一个div设置了contenteditable为true,也可以用ms-duplex指令.
各个表单元素的用法
<body ms-controller="test"> <script> avalon.define({ $id: 'test', aaa: 'aaa', bbb: 'bbb', ccc: 'ccc' }) </script> <input ms-duplex="@aaa"/>{{@aaa}} <input ms-duplex="@bbb" type="password"/>{{@bbb}} <textarea ms-duplex="@ccc" /></textarea>{{@ccc}} </body>
上面有三个控件,text, password, textarea它们都是属于输入型控件, 只要每为控件敲入一个字符, 后面的文本都会立即变化.那是因为它们默认是绑定oninput事件。也就是说，调用oninput事件后输入的内容都会赋值到（@aaa 等定义的变量值）
场景一：
如果想控件全部输入好,失去焦点时才同步,那么可以使用change过滤器。
<input ms-duplex="@aaa | change"/>{{@aaa}}
场景二：
如果你是做智能提示, 控件是绑定了一个AJAX请求与后端不断交互, 使用oninput事件会太频繁, 使用onchange事件会太迟钝,那么我们可以使用debounce过滤器
<input ms-duplex="@aaa | debounce(300)"/>{{@aaa}}
300ms同步一次.
另外,可编辑元素的用法与过滤器与上面三种控件一样.
<div contenteditable="true" ms-duplex="@aaa | debounce(300)"/></div> <p>{{@aaa}}</p>
其它场景：
此外, 控件还有许多种, 像checkbox, radio,它们的同步机制也不一样.
checkbox与radio是一点击就会更新.radio要求在vm中为一个简单数据类型数据,字符串,数字或布尔. 而checkbox则要求是一个数组.并且在最开始时,ms-duplex会令radio钩上其value值等vm属性的控件, checkbox则可以勾选多个.如此一来,vm中的属性些总是等于radio与checkbox的属性值.但我们也可以让 vm的属性值等于此控件的勾选状态,这时需要用上ms-duplex-checked转换器.
代码如下：
<body ms-controller="test"> <script> avalon.define({ $id: 'test', aaa: '33', bbb: ['22'] }) </script> <input type="radio" value="11" ms-duplex="@aaa"/> <input type="radio" value="22" ms-duplex="@aaa"/> <input type="radio" value="33" ms-duplex="@aaa"/> <input type="checkbox" value="11" ms-duplex="@bbb"/> <input type="checkbox" value="22" ms-duplex="@bbb"/> <input type="checkbox" value="33" ms-duplex="@bbb"/> <p>radio: {{@aaa}}; checkbox:{{@bbb}}</p> </body>
