avalon2对比avalon1 新增的功能汇总
@或##来告诉框架这些变量是来自vm的: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>
//数组
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-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 |
<div ms-controller="validate1">
<form ms-validate="@validate">
<p><input ms-duplex="@aaa" placeholder="username"
ms-rules='{required:true,chs:true}' >{{@aaa}}</p>
<p><input type="password" id="pw" placeholder="password"
ms-rules='{required:true}'
ms-duplex="@bbb" /></p>
<p><input type="password"
ms-rules="{required:true,equalto:'pw'}" placeholder="再填一次"
ms-duplex="@ccc | change" /></p>
<p><input type="submit" value="submit"/></p>
</form>
</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('全部通过')
}
}
}
})
<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="两次密码输入不一致"
>
filterBy， 对数组与对象都有效, 用于获取它们的某一子集, 有至少一个参数，用法如下|
过滤器
|
过滤器描述
|
|
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
|
<a href='./api.html' ms-click='@fn | prevent'>阻止跳转</a>
avalon2对比avalon1 新增的功能汇总的更多相关文章
- RedHat 和 Mirantis OpenStack 产品的版本和功能汇总和对比（持续更新）
Mirantis 和 Red Hat 作为 OpenStack 商业化产品领域的两大领军企业,在行业内有重要的地位.因此,研究其产品版本发布周期和所支持的功能,对制定 OpenStack 产品的版本和 ...
- 移植MonkeyRunner的图片对比和获取子图功能的实现-UiAutomator/Robotium篇
根据前一篇文章<移植MonkeyRunner的图片对比和获取子图功能的实现-Appium篇>所述,因为Appium和MonkeyRunner有一个共同点--代码控制流程都是在客户端实现的. ...
- SQL Server 后续去除功能汇总
原文:SQL Server 后续去除功能汇总 功能更新去除汇总 字段类型 在 Microsoft SQL Server 的未来版本中将删除 ntext.text 和 image 数据类型. 请避免在新 ...
- sns社交系统ThinkSNS+ 更新至V0.8.2，新增圈子功能
sns社交系统"ThinkSNS+"于7月15日发布了V0.8.0,含开源版本web+H5,及Android APP和iOS APP客户端. V0.8.2版本将于7月29日(本周六 ...
- atitit.新增编辑功能 跟orm的实现 attilax p31
atitit.新增编辑功能 跟orm的实现 attilax p31 1. 流程的实现 1 2. view的实现(dwr) 1 3. 获取表结构 1 4. grep filt req params 2 ...
- 项目开发-->高级功能汇总
祭奠曾经逝去的青春…… 1.高级功能汇总-->Memcached之ASP.NET实现 2.高级功能汇总-->HubbleDotNet软件安装
- 项目开发-->基础功能汇总
祭奠曾经逝去的青春…… 1.基础功能汇总-->身份认证及用户登录模块 2.基础功能汇总-->一键登录功能汇总 3.堆和栈 4.变量
- Java第十二次作业：什么是一维数组？什么是对象数组？吃金币游戏2.0版 新增炸弹功能 新增游戏倒计时功能 新增胜利失败检测功能 使用如鹏游戏引擎制作窗体 一维数组设置金币
什么是数组? 数组的定义:是用统一的名字代表这批数据,用序号来区分各个数据.数组是无序的数据元素按有序的下标组成的集合,分配固定空间大小的一种容器. 如何理解:其实就是一个同时放很多数据的变量. a= ...
- 关于html5新增的功能（百度）
HTML5包含以下新增和更新功能: 1. 新增了一种HTML文档类型:<DOCTYPE html> 2. 新增了一些结构化标记的元素(<header>,<nav> ...
随机推荐
- Vue.js组件之同级之间的通信
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 版本管理工具 —— SVN
想想我们在开发过程中是不是会遇到这样的情况: 今天写了很长的一段代码,觉得不合理,然后删了,第二天突然发现昨天的那段代码才是正确的,那怎么办,也无法撤销删除的代码? 还有团队中多人共同开发一个项目,如 ...
- C# 输入法
C# 输入法 虽说输入法不是什么新事物,各种语言版本都有,不过在C#不常见:这就会给人一种误会:C#不能做!其实C#能不能做呢,答案是肯定的--三种方式都行:IMM.TSF以及外挂式.IMM这种就是调 ...
- DOM的内部插入和外部插入
/*****************返回值都是最前面调用这个方法的元素 ***************** */ //这是外部插入 $("div").insertBefore($( ...
- Python中参数是传值，还是传引用？
在 C/C++ 中,传值和传引用是函数参数传递的两种方式,在Python中参数是如何传递的?回答这个问题前,不如先来看两段代码. 代码段1: def foo(arg): arg = 2 print(a ...
- SolrCloud的介绍
SolrCloud(solr云)是Solr提供的分布式搜索方案. 当你需要大规模,容错,分布式索引和检索能力时使用 SolrCloud. 当索引量很大,搜索请求并发很高时,同样需要使用SolrClou ...
- 动力IT教育背后的“神秘力量”
IT行业作为当前就业形势最好的行业,成为大多数毕业生以及转行人群的首选.且国家也对互联网大力支持,IT行业市场需求空缺也越来越大,随之IT培训机构也如雨后春笋般,层出不穷. 行业易选,但该如何选择培训 ...
- zsh 简单介绍
什么是 zsh,要想解释好这个问题,那么得先说明什么是 shell.不负责任的解释说法就是 shell 就是一个壳.这个壳可不是蜗牛的壳,而是计算机的一个壳,当然也不是计算机的外壳啦,这个壳是相对于计 ...
- ArcEngine保存栅格数据至rastercatalog
将栅格数据(IRasterDataset)直接保存到数据库中很常见,但是保存到栅格目录下就比较少见,好不容易才找到,在这里记录一下. public void saveRasterDs2Catalog( ...
- java 接口默认修饰符问题
package test; public interface InterfaceTest { void todo();} /** * 以下是反编译的内容,接口里的方法默认都是public的.abstr ...