26avalon - 指令ms-duplex（各表单元素用法）

双工绑定

双工绑定是MVVM框架中最强大的指令.react推崇单向数据流,没有双工绑定, 那么需要rudex等额外的库来实现相同的功能. 双工绑定只要用于表单元素上.或当一个div设置了contenteditable为true,也可以用ms-duplex指令.

各个表单元素的用法

    
        avalon.define({
            $id: 'test',
            aaa: 'aaa',
            bbb: 'bbb',
            ccc: 'ccc'
        })

    

    {{@aaa}}
    {{@bbb}}
    {{@ccc}}

上面有三个控件,text, password, textarea它们都是属于输入型控件, 只要每为控件敲入一个字符, 后面的文本都会立即变化.那是因为它们默认是绑定oninput事件。也就是说，调用oninput事件后输入的内容都会赋值到（@aaa 等定义的变量值）

场景一：

如果想控件全部输入好,失去焦点时才同步,那么可以使用change过滤器。

{{@aaa}}

场景二：

如果你是做智能提示, 控件是绑定了一个AJAX请求与后端不断交互, 使用oninput事件会太频繁, 使用onchange事件会太迟钝,那么我们可以使用debounce过滤器

{{@aaa}}

300ms同步一次. 另外,可编辑元素的用法与过滤器与上面三种控件一样.

{{@aaa}}

其它场景：

此外, 控件还有许多种, 像checkbox, radio,它们的同步机制也不一样. checkbox与radio是一点击就会更新.radio要求在vm中为一个简单数据类型数据,字符串,数字或布尔. 而checkbox则要求是一个数组.并且在最开始时,ms-duplex会令radio钩上其value值等vm属性的控件, checkbox则可以勾选多个.如此一来,vm中的属性些总是等于radio与checkbox的属性值.但我们也可以让 vm的属性值等于此控件的勾选状态,这时需要用上ms-duplex-checked转换器.

代码如下：

    
        avalon.define({
            $id: 'test',
            aaa: '33',
            bbb: ['22']
        })

    

    
    
    
    
    
    
    
radio: {{@aaa}}; checkbox:{{@bbb}}