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> ...
随机推荐
- vs2017 .net core WebApp 去掉ApplicationInsights
vs2017新建的 .net core WebApp都内置了这个遥测中间件进去,嗯,用AZURE的话是不错能无缝支持.但不用AZURE就没什么用了. 为了不占地方和提高一点点初始启动的速度,对新建的项 ...
- 转：js中cookie的使用详细分析
cookie机制将信息存储于用户硬盘,因此可以作为全局变量,这是它最大的一个优点.它可以用于以下几种场合. (1)保存用户登录状态.例如将用户id存储于一个cookie内,这样当用户下次访问该页面时就 ...
- 实现自动构建编译javaweb项目并发布到N台服务器
前言 当你使用nginx实现了负载均衡,当你有了超过3台以上的应用服务器时,一个特别头疼的问题就来了,发布项目好麻烦. 你每次都要在本地编译打包一遍,然后手动复制到每一台服务器上面去,如果只有一两台服 ...
- [HDUOJ1312]Red And Black (经典的DFS)
Hot~~招聘——亚信科技,巴卡斯(杭州),壹晨仟阳(杭州),英雄互娱(杭州) (包括2016级新生)除了校赛,还有什么途径可以申请加入ACM校队? Red and Black Time Limit: ...
- [POJ1028]Web Navigation(栈)
这题是01年East Central North的A题,目测是签到题 Description Standard web browsers contain features to move backwa ...
- 关于Http请求后返回json乱码的问题
其实很多时候我们在做http请求数据返回的时候经常会莫名发现会出现乱码,大部分时候我们都觉得是编码不对造成的. 一般情况下正常我们默认都是作个很简单的操作,直接使用UTF-8编码基本问题就搞定了 Ht ...
- Triangle Problems
Triangle Problem songxiuhuan 宋修寰 Import the Junit and eclemma Choose the project and right click, ch ...
- JAVA I/O 字符输出流简要概括
偷个懒,直接参考上篇字符输入流Reader的形式,其实Reader和Writer本来就大同小异: 字符输出流Writer 本篇将对JAVA I/O流中的字符输出流Writer做个简单的概括: 总得来说 ...
- python 接口自动化测试（一）
一.测试需求描述 对服务后台一系列SOAP接口功能测试 参数传入:根据接口描述构造不同的参数输入值(Json格式) 二.程序设计 通过Excel配置具体的测试用例数据 保存参数为Json格式,预写入预 ...
- django进阶补充
前言: 这篇博客对上篇博客django进阶作下补充. 一.效果图 前端界面较简单(丑),有两个功能: 从数据库中取出书名 eg: 新书A 在form表单输入书名,选择出版社,选择作者(多选),输入完毕 ...