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> ...
随机推荐
- Lambda&Java多核编程-5-函数式接口与function包
从前面的总结中我们知道Lambda的使用场景是实现一个函数式接口,那么本篇就将阐述一下何为函数式接口以及Java的function包中提供的几种函数原型. 函数式接口 早期也叫作SAM(Single ...
- Vuex给我们的.vue文件结构带来了这些变化
使用vuex前后的对比 使用vuex前 //BookRecommend.vue <script> import * as API from '../api/index' export de ...
- 全新的 flow.ci Dashboard UI 上线
全新的 flow.ci Dashboard 页面上线了,更快捷地创建项目,构建列表页面新增分支,Pull Request 界面:侧边栏新增构建任务监控和项目监控,整个 Dashboard 界面焕然一新 ...
- 对VC++6.0爱得深沉（三）静态库的制作与使用
[创建] 1)建立新工程(win32静态库) (2)加入.h文件于.cpp文件如图. 3)编译-构建,生成.lib文件 [使用] 1)新建普通控制台程序 2)打开项目文件夹与刚才生成的库文件夹 3)方 ...
- Linux搭建FastFDFS文件管理系统搭建，部署及上传材料
昨天下午花了三四个小时在Linux centos 6 上搭建了一个分布式文件系统.纯粹是搭建来做自己的文件备份.所以把一些自己在其中遇到的一些问题给总结出来,免得更多人走错路. FastDFS 的一些 ...
- reactjs Uncaught TypeError: Cannot read property 'location' of undefined
reactjs Uncaught TypeError: Cannot read property 'location' of undefined reactjs 路由配置 怎么跳转 不成功 国内搜索引 ...
- MVC学习笔记2 - Razor语法
Razor 同时支持 C# (C sharp) 和 VB (Visual Basic). C# 的主要 Razor 语法规则 Razor 代码封装于 @{ ... } 中 行内表达式(变量和函数)以 ...
- GitHub 添加 SSH keys
首先在本地创建 SSH Keys $ ssh-keygen -t rsa -C "18817801185@163.com" 后面的邮箱即为 github 注册邮箱,之后会要求确认路 ...
- xml转义符
今天在看项目的UrlRewriteFilter(动态url静态化,有利于搜索引擎搜索)的配置文件urlrewrite.xml时,看到了“&”字符,查询之后才知道xml文件中的转义比html中的 ...
- 苹果App删除 AppStore应用删除指南
最近做IOS应用上传时,想改一下SUK或者Bundle ID ,发现改不了,只能删除. 但是删除却没有找到删除按钮,百度半天不给力,不过后来多亏一位群里的兄弟给找个链接,终于解决 今天就给他记录下来, ...