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>

转载于:https://www.cnblogs.com/leyi/p/6180692.html

avalon使用笔记相关推荐

Hyperledger Avalon启动笔记
前略之前有关Avalon的笔记 https://blog.csdn.net/oe1019/article/details/109395243 参考链接 https://hyperledger.git ...
MVVM框架之avalon学习笔记（1）
初学示例: <!DOCTYPE html> <html> <head> <title>TODO supply a title</title ...
avalon视频学习笔记（六）
一.数据缓存 1.绑定属性ms-data-* avalon的数据缓存功能与jquery的data()类似,但不同于jquery的是:avalon是直接将数据保存在元素节点上的data- ...
avalon 笔记---Mr.wing
Avalon笔记步骤一: 引用js文件<script src="js/avalon.js"></script> 步骤二: <script> v ...
【Avalon】Avalon笔记（解析Dom模板树，按自己的规范）
解析Dom树: {{}}结点:生成求值函数(ViewModel)和刷新函数(View),立即进行一次求值(注册监听器到setter/getter)和刷新解析流程: domReady扫描Dom树: 特 ...
requirejs使用笔记
一.requirejs为何会多次加载两次data-main文件文件目录: html页面: <!DOCTYPE html> <htmllang="en"& ...
WPF笔记(1.1 WPF基础)——Hello，WPF！
WPF笔记(1.1 WPF基础)--Hello,WPF! 原文:WPF笔记(1.1 WPF基础)--Hello,WPF! Example 1-1. Minimal C# WPF application ...
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 的目的是 ...
FPGA niosII 视频笔记
工作需要使用FPGA驱动的CAN总线,一番搜索发现正点原子开发板有例程.了解之后知道是FPGA内部软核IP,基于qsys实现 ,就看完了相关视频. nios更进一步可以看FPGA niosII 视频笔 ...

avalon使用笔记

avalon使用笔记相关推荐

最新文章

热门文章