//保存取消操作（使用双向绑定）
<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>