avalon使用笔记
//保存取消操作（使用双向绑定）
<div ms-controller='test'>
<table border="1" style="border-collapse: collapse;">
<tbody :visible="@showLayer">
<tr :for="(k,v) in @data" >
<td height="66">
<div :visible="v.showCurRow">
<input :duplex="v.value" :attr="{'placeholder':v.placeholder,'type':v.type}"/>
<div style="text-align: center;padding-top:10px;">
<button :click="v.save" style="margin-right:10px;">保存</button>
<button :click="v.cancel">取消</button>
</div>
</div>
</td>
<td>
<a href="javsscript:;" :click="v.showCurRow=!v.showCurRow">{{v.showCurRow?'收缩':'展开'}} </a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2" align="center">
<button :click="@showLayer=!@showLayer" :click-1="@console">弹层</button>
</td>
</tr>
</tfoot>
</table>
</div>
</body>
<script>
var vm=avalon.define({
$id:"test",
data:[{'name':'用户名',"value":'',type:'text'},{'name':'密码',"value":'',type:'password'}],
showLayer:true,
init:function(){
var that=this;
var newData=vm.data.$model;
_.each(newData,function(item){
item['saveValue']='';
item['showCurRow']=true;
item['placeholder']='请输入'+item.name;
item['type']=item.type;
item['save']=function(){
this['saveValue']=this['value'];
this['showCurRow']=false;
};
item['cancel']=function(){
this['value']=this['saveValue'];
this['showCurRow']=false;
}
});
vm.data=newData
},
console:function(){
console.info(this.data.$model)
}
});
vm.init();
//数据延迟赋值，联动效果
<body>
<div :controller="haha">
<form name="leyi">
<select name="halo" :duplex="@data.expSelected">
<option :for="(k,v) in @data.selectArr" :attr="{'value':v.VALUE}">{{v.DISPLAY_VALUE}}</option>
</select>
<select name="" :visible="@data.expSelected==1" :attr="{'disabled':@data.expSelected!=1}" >
<option value="0">矩形</option>
<option value="1">圆形</option>
</select>
<select name="" :visible="@data.expSelected==2" :attr="{'disabled':@data.expSelected!=2}">
<option value="0">红色</option>
<option value="1">绿色</option>
</select>
</form>
</div>
<script>
//数据延迟赋值，联动效果
var vm=avalon.define({
$id:'haha',
data:{
expSelected:'',
"selectArr":[]
},
init:function(){
var that=this;
var selectArrData=[
{
"DISPLAY_VALUE": "其他",
"VALUE": "3"
},
{
"DISPLAY_VALUE": "颜色",
"VALUE": "2"
},
{
"DISPLAY_VALUE": "图形",
"VALUE": "1"
}
];
//that.data.selectArr=selectArrData;
setTimeout(function(){//数据延迟加载
that.data.selectArr=selectArrData;
that.data.expSelected=2
},1000)
}
});
vm.init();
</script>
//查看更多的展开收缩
<body>
<div :controller='test'>
<span :for="el in data|limitBy(4)">{{el}}</span>
<span :for="el in data|limitBy(@data.length-4,4)" :visible="@bool">{{el}}</span>
<span :visible="@data.length>4" :click="@bool=!@bool">{{@bool?'收缩':'更多'}}</span>
</div>
</body>
<script>
var vm=avalon.define({
$id:"test",
data:[1,2,3,4,5,6,7],
bool:false
});
</script>
//tab切换
<style>
.active{color:red}
</style>
</head>
<body>
<div :controller='test'>
<div class="tabHeader">
<span :for="(k,v) in @tabData" :mouseenter="@tabActiveIndex=k" :class="[(@tabActiveIndex==k&&'active')]">{{v.tabTitle}}</span>
</div>
<ul class="tabContent">
<li :for="(k,v) in @tabData" :visible="k==@tabActiveIndex" >{{v.tabContent}}</li>
</ul>
</div>
</body>
<script>
var vm=avalon.define({
$id:"test",
tabData:[
{
tabTitle:"tab1标题",
tabContent:"tab1内容"
},
{
tabTitle:"tab2标题",
tabContent:"tab2内容"
},
{
tabTitle:"tab3标题",
tabContent:"tab3内容"
}
],
tabActiveIndex:0
});
</script>
avalon使用笔记的更多相关文章
- avalon学习笔记
背景: 刚刚到一家新的公司,我新接手的项目采用的mvvm框架是avalon,当然我以前没有学过angular,但是用过react,所以对于这类框架应该不算陌生.但毕竟是一个新的框架,所以还是先学起来, ...
- avalon学习笔记一 列表及条件过滤
好长时间都没有更新博客了,不是因为没有学习新的东西,而是到了新的单位每天玩命加班实在是太累了!经过一年的努力吧,终于可以轻松一下了.废话少说,直接干货吧! 由于是学习阶段,就直接拿了公司的二级页面做了 ...
- avalon 笔记---Mr.wing
Avalon笔记步骤一:引用js文件<script src="js/avalon.js"></script>步骤二:<script> var v ...
- IE6/IE7尿性笔记 && avalon && director
表单提交 [ie6] form默认特性(input回车以及点击type=submit的按钮会自动触发form submit),在ie6中,不能使button[submit],必须是input[subm ...
- 架构 Roadmap 笔记分享
虽然我们的架构不是开源的,不过一些笔记可以愿意公开和大家讨论一下,我相信不少人在和我们干着同样的事情,那不如一块儿交流一下,这样我们可以更快. 这里前端,后端都有,前端我们用的是 avalon js, ...
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
- Vue学习笔记-1
前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...
- 一步步编写avalon组件01：弹出层组件
avalon2已经稳定下来,是时候教大家如何使用组件这个高级功能了. 组件是我们实现叠积木开发的关键. avalon2实现一个组件非常轻松,并且如何操作这个组件也比以前的avalon2,还是react ...
- Vue学习笔记1
目录 前言 1.vue和avalon一样,都不支持VM初始时不存在的属性 2.input元素中属性与v-model同时存在以属性为优先 3.VM中的函数放到data属性和methods属性中的区别,以 ...
随机推荐
- 为模版设计师而生的Twig（下）-Twig使用指南
原文地址:http://my.oschina.net/veekit/blog/276800 12. 模板继承 Twig最强大的部分是模板继承.模板继承允许你建立一个基本的"骨架"模 ...
- Python忽略warning警告错误
python开发中经常遇到报错的情况,但是warning通常并不影响程序的运行,而且有时特别讨厌,下面我们来说下如何忽略warning错误. 在说忽略warning之前,我们先来说下如何主动产生war ...
- CodeSmith模板
重复性的工作交给代码生成器就好,这里分享几套模板, 1.从数据库抓取字段,生成Table元素,这个在web开发中很有用 <%-- Name: Author: Description: --%&g ...
- 在阿里云主机上基于CentOS用vsftpd搭建FTP服务器
最近需要在一台阿里云的云服务器上搭建FTP服务器,在这篇博文中分享一下我们根据实际需求进行的一些配置. ftp软件用的是vsftpd. vsftpd是一款在Linux发行版中最受推崇的FTP服务器程序 ...
- bootstrap-提示标签、提示框
提示标签: <body> <div class="container"> <div class="row"> <div ...
- 安装lua和openresty
#### ubuntu 16.04 64bit 安装Lua luajit 及openresty 1 安装lua ,因为luajit 支持lua5.1较好.貌似不支持5.2和5.3作为学习,我就安装5. ...
- 每天一个 Linux 命令（22）：find 命令的参数详解
find一些常用参数的一些常用实例和一些具体用法和注意事项. 1．使用name选项: 文件名选项是find命令最常用的选项,要么单独使用该选项,要么和其他选项一起使用. 可以使用某种文件名模式来匹配 ...
- java GC的优化
参考网摘: http://www.360doc.com/content/13/0305/10/15643_269388816.shtml
- 日本DARTS 支撑的一系列应用项目
DARTS是多学科空间科学数据平台,例如天体物理.太阳物理.太阳物理.月球与行星科学和微重力科学.在此数据支撑下,有许多应用. 1.http://wms.selene.darts.isas.jaxa. ...
- QBC
c.add(Restrictions.sqlRestriction("exists (SELECT p.loan_contract_no FROM crf_p2p_app_info p WH ...