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：

<a href='./api.html' ms-click='@fn | prevent'>阻止跳转</a>