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>