avalon2对比avalon1 新增的功能汇总

avalon2.0 与1.4,1.5相比, 2.0是移除了ms-repeat, ms-each, ms-with, ms-include, ms-include-src,ms-data, ms-scan, ms-if-loop指令
avalon2.0 最主要的改变是 -- 引导符,使用 @##来告诉框架这些变量是来自vm的
avalon2.1.15后还可以使用 :xxxx短指令,ms-if 可以写成 :if  ;eg
 
<body :controller="test">
    <input :duplex="@name">
    <p>Hello,{{@name}}!p>
    <ul>
      <li :for="($index,el) in @array">{{$index}}--{{el}}li>
    ul>
    <a :if="a==1">a>
body>

 

 
ms-for:绑定集齐了ms-repeat, ms-each, ms-with的所有功能, 并且更好用, 性能提升七八倍
利用了js 中 forin的用法,
//数组 
aaa:[1,2,3,4]
<li ms-for="($index, el) in @aaa">{{$index}}-{{el}}li>
// 或者 ms-for="el in @aaa"   {{el}}
//对象 
bbb:{
     a:1,
     b:2
},
ccc:function(){
     console.log('执行完毕')
     //do something
}
ms-for="($key, $val) in @bbb" 

 

 
<li data-for-rendered="@ccc" ms-for="($key, $val) in @bbb">{{$key}}-{{$val}}li>

 

 
ms-for还可以配套data-for-rendered回调,当列表渲染好时执行此方法(callback[回调]);
 
ms-rules :  用于定义验证规则,此指令只能用于添加ms-duplex指令的表单元素上; avalon内置验证规则有
规则 描述
required(true) 必须输入的字段
norequired(true) 不是必填的字段
email(true) 必须输入正确格式的电子邮件
url(true) 必须输入正确格式的网址
date(true或正则) 必须输入正确格式的日期。默认是要求YYYY-MM-dd这样的格式
number(true) 必须输入合法的数字(负数,小数)
digits(true) 必须输入整数
pattern(正则或true) 让输入数据匹配给定的正则,如果没有指定,那么会到元素上找pattern属性转换成正则再匹配
equalto(ID名) 输入值必须和 #id 元素的value 相同
maxlength:5 输入长度最多是 5 的字符串(汉字算一个字符)
minlength:10 输入长度最小是 10 的字符串(汉字算一个字符)
chs(true) 要求输入全部是中文
max:5 输入值不能大于 5
min:10 输入值不能小于 10
eg:
 
 
 1 <div ms-controller="validate1">
 2   <form ms-validate="@validate">
 3       <p><input ms-duplex="@aaa" placeholder="username"
 4                 ms-rules='{required:true,chs:true}' >{{@aaa}}p>
 5       <p><input type="password" id="pw" placeholder="password"
 6                 ms-rules='{required:true}'
 7                 ms-duplex="@bbb" />p>
 8       <p><input type="password"
 9             ms-rules="{required:true,equalto:'pw'}" placeholder="再填一次"
10             ms-duplex="@ccc | change" />p>
11       <p><input type="submit" value="submit"/>p>
12   form>
13 div>
var vm = avalon.define({
        $id: "validate1",
        aaa: "",
        bbb: '',
        ccc: '',
        validate: {
            onError: function (reasons) {
                reasons.forEach(function (reason) {
                    console.log(reason.getMessage())
                })
            },
            onValidateAll: function (reasons) {
                if (reasons.length) {
                    console.log('有表单没有通过')
                } else {
                    console.log('全部通过')
                }
            }
        }
    })

 

  

 
ms-rules需要和ms-validate一起用,ms-validate 用于定义各种回调与全局的配置项,所以如果要使用ms-rules, 必须同时使用三个指令。
使用ms-rules验证肯定需要提示信息, data-message或data-required-message 可以帮你搞定你需要的提示信息;eg
 
<input id="password"
                          name="password"
                          type="password"
                          ms-duplex="@password"
                          ms-rules="{required:true,minlength:5}"
                          data-required-message="请输入密码"
                          data-minlength-message="密码长度不能小于 5 个字母"
                          >
<input id="confirm_password"
                          name="confirm_password"
                          type="password"
                          ms-duplex="@confirm_password"
                          ms-rules="{required:true,equalto:'password'}"
                          data-equalto-message="两次密码输入不一致"
                          >

 

 
 
 
ms-for循环过滤器
 
1、limitBy,对数组与对象都有效, 限制输出到页面的个数,用法如下
ms-for='el in @array | limitBy(@num[,@beginNum])'  //@num 最大个数,必须是数字或字符, 当个数超出数组长或键值对总数时, 等于后面; @beginNum开始循环的个数, 可选,默认0
2、orderBy,对数组与对象都有效, 用于排序,用法如下
ms-for="el in @array | orderBy(@order, @dir)"   //@order 要排序的属性名    @dir-1或1, 顺序或倒序,可选,默认1
3、 filterBy, 对数组与对象都有效, 用于获取它们的某一子集, 有至少一个参数,用法如下
ms-for='el in @array | filterBy(@search)'     //如果为函数时, 通过返回true决定成为子集的一部分; 如果是字符串或数字, 将转换成正则, 如果数组元素或对象键值匹配它,则成为子集的一部分,但如果是空字符串则返回原对象 ;其他情况也返回原对象。 其他参数, 只有当search为函数时有效, 这时其参数依次是组元素或对象键值, 索引值, 多余的参数 此过滤多用于自动完成的模糊匹配!
4、selectBy, 只对对象有效, 用于抽取目标对象的几个值,构成新数组返回,用法如下
ms-for="td in tr | selectBy(['a','b','c'][,@defaults])"   //@array要抽取的属性名,type为Array    @defaults如果目标对象不存在这个属性,那么从这个默认对象中得到默认值,否则为空字符串, 可选
 
 
事件过滤器
 
过滤器
过滤器描述
esc 
当用户按下esc键时,执行你的回调
tab
当用户按下tab键时,执行你的回调
enter
当用户按下enter键时,执行你的回调
space
当用户按下space键时,执行你的回调
del 
当用户按下del键时,执行你的回调
up
当用户按下up键时,执行你的回调
down 
当用户按下down键时,执行你的回调
left 
当用户按下left键时,执行你的回调
right
当用户按下right键时,执行你的回调
prevent 
阻止默为行为,多用于form的submit事件防止页面跳转,相当于调用了event.preventDefault
stop
阻止事件冒泡,相当于调用了event.stopPropagation
 
 
用法如下eg:
 

  

 

转载于:https://www.cnblogs.com/xhtml5/p/6742576.html

你可能感兴趣的:(avalon2对比avalon1 新增的功能汇总)