26、avalon.duplexHooks的使用
发布在avalon学习教程2014年12月3日view:11221
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

avalon在1.3.7实现duplex2.0,其实质就是添加了avalon.duplexHooks这个钩子对象,以后ms-duplex都会经过此对象中的拦截器做各种操作,如数据验证啊,类型转换啊,数据格式化啊,光标引导啊……

我们先看一下用$watch回调如何限制输入长度的吧。比如我们想限制不能超过8个字符。

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="avalon.js"></script>
        <script>
            var vm = avalon.define({
                $id: "test",
                aaa: "111"
            })
            vm.$watch("aaa", function(newValue, oldValue) {
                if (newValue.length > 8) {
                    vm.aaa = oldValue
                }
            })
        </script>
    </head>
    <body>
        <div ms-controller="test">
            <input ms-duplex="aaa"/>{{aaa}}
        </div>
    </body>
</html>

enter image description here

我们再看一下,如何转换类型

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="avalon.js"></script>
        <script>
            var vm = avalon.define({
                $id: "test",
                aaa: "111"
            })
            vm.$watch("aaa", function(newValue, oldValue) {
                if (newValue && typeof newValue !== "number"){
                    vm.aaa = parseFloat(newValue)
                }
            })
        </script>
    </head>
    <body>
        <div ms-controller="test">
            <input ms-duplex="aaa"/>{{typeof aaa}} {{aaa}}
        </div>
    </body>
</html>

enter image description here

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="avalon.js"></script>
        <script>
            var vm = avalon.define({
                $id: "test",
                aaa: "111"
            })
            //添加一个拦截器
            avalon.duplexHooks.limit = {
                get: function(str, data) {
                    var limit = parseFloat(data.element.getAttribute("data-duplex-limit"))
                    if (str.length > limit) {
                        return data.element.value = str.slice(0, limit)
                    }
                    return str
                }
            }
        </script>
    </head>
    <body>
        <div ms-controller="test">
            <input ms-duplex-limit="aaa" data-duplex-limit="8"/> {{aaa}}
        </div>
    </body>
</html>

enter image description here

如果是转换成数字,就更简单了,因为avalon核心库现在直接内置ms-duplex-number拦截器。

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="avalon.js"></script>
        <script>
            var vm = avalon.define({
                $id: "test",
                aaa: "111"
            })

        </script>
    </head>
    <body>
        <div ms-controller="test">
            <input ms-duplex-number="aaa" />{{typeof aaa}} {{aaa}}
        </div>
    </body>
</html>

enter image description here

有了avalon.duplexHooks这个扩展点,我们做验证就简单了,这个以后我会详细介绍的。

评论
发表评论
3年前

刚开始学,支持一下

3年前
添加了一枚【评注】:非监控属性
3年前
添加了一枚【评注】:dfdf fd fdf sd
3年前
赞了此文章!
3年前
赞了此文章!
4年前

@BorisOrz 升级

4年前

在ie9文本框中使用搜狗输入法,好像文本框会捕获不到输入的事件,导致vm没有更新,求教大神该如何处理= =

4年前

avalon 的UI 组件开发希望 大大能出个教程

4年前
添加了一枚【评注】:mark
4年前
赞了此文章!
4年前
赞了此文章!
4年前
添加了一枚【评注】:fdsaf
WRITTEN BY
司徒正美
穿梭于二次元与二进制间的魔法师( ̄(工) ̄) 凸ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้
TA的新浪微博
PUBLISHED IN
avalon学习教程

从零开始学习到掌握当前国内最强大的MVVM框架avalon

我的收藏