avalon2
Version:
an elegant efficient express mvvm framework
89 lines (85 loc) • 3.34 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../../dist/avalon.js"></script>
<script>
function heredoc(fn) {
return fn.toString().replace(/^[^\/]+\/\*!?\s?/, '').
replace(/\*\/[^\/]+$/, '').trim().replace(/>\s*</g, '><')
}
var expect = function (a) {
return {
to: {
equal: function (b) {
console.log(a, b, a === b)
}
}
}
}
var called = false
var vm = avalon.define({
$id: 'for0',
array: [1, 2, 3, 4, 5],
fn: function () {
called = true
},
object: {
a: 11,
b: 22,
c: 33,
d: 44,
e: 55
}
})
window.onload = function () {
var div = document.getElementById('aaa')
var lis = div.getElementsByTagName('li')
var ps = div.getElementsByTagName('p')
expect(lis[0].innerHTML).to.equal('0::1')
expect(lis[1].innerHTML).to.equal('1::2')
expect(lis[2].innerHTML).to.equal('2::3')
expect(lis[3].innerHTML).to.equal('3::4')
expect(lis[4].innerHTML).to.equal('a::11')
expect(lis[5].innerHTML).to.equal('b::22')
expect(lis[6].innerHTML).to.equal('c::33')
expect(lis[7].innerHTML).to.equal('d::44')
expect(lis[8].innerHTML).to.equal('e::55')
expect(ps[0].innerHTML).to.equal('1')
expect(ps[1].innerHTML).to.equal('2')
expect(ps[2].innerHTML).to.equal('3')
expect(ps[3].innerHTML).to.equal('4')
expect(ps[4].innerHTML).to.equal('5')
expect(called).to.equal(true)
vm.array.reverse()
vm.array.unshift(9)
setTimeout(function () {
expect(lis[0].innerHTML + "!").to.equal('0::9!')
expect(lis[1].innerHTML).to.equal('1::5')
expect(lis[2].innerHTML).to.equal('2::4')
expect(lis[3].innerHTML).to.equal('3::3')
expect(ps[0].innerHTML).to.equal('9')
expect(ps[1].innerHTML).to.equal('5')
expect(ps[2].innerHTML).to.equal('4')
expect(ps[3].innerHTML).to.equal('3')
expect(ps[4].innerHTML).to.equal('2')
}, 300)
}
</script>
</head>
<body>
<div ms-controller='for0' id="aaa">
<ul>
<li ms-for='($index, el) in @array | limitBy(4)' data-for-rendered="@fn">{{$index}}::{{el}}</li>
</ul>
<ol>
<li ms-for='($key, $val) in @object'>{{$key}}::{{$val}}</li>
</ol>
<!--ms-for: ($index,el) in @array -->
<p>{{el}}</p>
<!--ms-for-end:-->
</div>
</body>
</html>
ms-on-click="aaa == null ? '111': String(aaa+bbb) "