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> ...
随机推荐
- 牛顿迭代法(Newton's Method)
牛顿迭代法(Newton's Method) 简介 牛顿迭代法(简称牛顿法)由英国著名的数学家牛顿爵士最早提出.但是,这一方法在牛顿生前并未公开发表. 牛顿法的作用是使用迭代的方法来求解函数方程的根. ...
- ACM Fibonacci数 计算
Fibonacci数 时间限制:3000 ms | 内存限制:65535 KB 难度:1 描述 无穷数列1,1,2,3,5,8,13,21,34,55...称为Fibonacci数列,它可以递 ...
- 1212: [HNOI2004]L语言
1212: [HNOI2004]L语言 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 643 Solved: 252[Submit][Status] ...
- 1798: [Ahoi2009]Seq 维护序列seq
1798: [Ahoi2009]Seq 维护序列seq Time Limit: 30 Sec Memory Limit: 64 MBSubmit: 2930 Solved: 1087[Submit ...
- ORM映射设计思想
using System; using System.Collections.Generic; using System.Data.SqlClient; using System.Linq; usin ...
- Unity获取安卓手机运营商，电量，wifi信号强度，本地Toast，获取已安装apk，调用第三方应用，强制自动重启本应用
一个完整的游戏项目上线需要不断的完善优化,但是到了后期的开发不再仅仅是游戏了,它的复杂度远远大于纯粹的应用开发.首先必须要考虑的就是集成第三方SDK,支付这块渠道商已经帮你我们做好了,只需要按照文档对 ...
- Office 365开发概述及生态环境介绍（二）
本文于2017年3月19日首发于LinkedIn,原文链接在这里 在上一篇 文章,我给大家回顾了Office发展过来的一些主要的版本(XP,2003,2007,2013等),以及在Office客户端中 ...
- fastjson过滤不需要的属性
以下是一个通用的对象转json的方法,使用的fastjson的SimplePropertyPreFilter 对象,个人感觉比使用PropertyPreFilter的匿名内部类形式的过滤器更好用!直接 ...
- GreenDao 工具类 --- 使用 Json 快速生成 Bean、表及其结构，"炒鸡"快！
作者:林冠宏 / 指尖下的幽灵 掘金:https://juejin.im/user/587f0dfe128fe100570ce2d8 博客:http://www.cnblogs.com/linguan ...
- yii中调整ActiveForm表单样式
Yii2中对于表单和字段的支持组件为ActiveForm和ActiveField, <?php $form = ActiveForm::begin([ 'id' => 'login-for ...