avalon2
Version:
an elegant efficient express mvvm framework
72 lines (64 loc) • 2.29 kB
HTML
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../dist/1.4.js"></script>
<script>
var vm = avalon.define({
$id: 'for0',
header: ['name', 'age', 'sex'],
list: [],
order: function () {
return ["name", "age", "sex"]
}
})
var sexMap = {
'true': "男",
'false': "女"
}
avalon.config.debug = false
function genData(n) {
var ret = []
for (var i = 0; i < n; i++) {
ret.push({
name: Math.random(),
age: 3 + Math.ceil((Math.random() * 30)),
sex: sexMap[1 - Math.random() > 0.5],
desc: Math.random()
})
}
return ret
}
var array = []
var id = setInterval(function () {
var t1 = Date.now()
vm.list = genData(1000)
var cost = Date.now() - t1
array.push(cost)
console.log('total ', cost, ' ms', array.length)
if (array.length > 60) {
console.log('平均耗时 ' + (array.reduce(function (a, b) {
return a + b
}, 0)) / 60 + ' ms!!!')
array.shift()
console.log('更新平均耗时', array.reduce(function (a, b) {
return a + b
}, 0) / array.length, 'ms')
clearInterval(id)
}
}, 50)
</script>
</head>
<body>
<div ms-controller='for0' >
<table border="1">
<tr><th ms-repeat-el='header'>{{el}}</th></tr>
<tr ms-repeat-tr='list'>
<td ms-repeat='tr' data-with-sorted="order" ms-attr-align="$key === 'age' ?'left':'right'" >{{$val}}</td>
</tr>
</table>
</div>
</body>
</html>