avalon2
Version:
an elegant efficient express mvvm framework
77 lines (72 loc) • 1.73 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="../dist/avalon.js"></script>
<script>
function genData(n) {
var list = [];
for (var i = 0; i < n; i++) {
list.push({
aaa: new Date - i,
bbb: Math.random().toString(32).replace(/0\./, ""),
ccc: (Math.random() + "").replace(/0\./, ""),
ddd: i
})
}
return list
}
var vm = avalon.define({
$id: 'test',
header: ['aaa', 'bbb', 'ccc'],
start: 0,
count: 10,
data: genData(300),
ready: function (e) {
},
ddd: 'bbb'
});
</script>
<style>
.header {
border:1px solid #000;
width: 600px;
border-collapse: collapse;
}
.header td{
border:1px solid #000;
text-align: center;
font-weight: 700;
height:30px;
color: #607fa6;
font-weight: 700;
}
.tbody{
width: 600px;
margin-top: -1px;
border:1px solid #000;
border-collapse: collapse;
}
.tbody td{
border:1px solid #000;
height: 30px;
}
</style>
</head>
<body>
<div ms-controller="test">
<table slot='header' class="header">
<tr>
<td :for="el in @header" style="width:200px" >
{{el}}
</td>
</tr>
</table>
<table slot="tbody" class="tbody">
<tr :for="obj in @data | limitBy(@count, @start)">
<td :for="el in obj | selectBy(@header)" style="width:200px">{{el}}</td>
</tr>
</table>
</div>
</body>
</html>