avalon2
Version:
an elegant efficient express mvvm framework
75 lines (71 loc) • 2.44 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)
}
}
}
}
avalon.component('ms-select', {
template: heredoc(function () {
/*
<div>
<select ms-duplex="@currentNum">
<option ms-for="el in @numList">{{el}}</option>
</select>
<p>{{@currentNum}}</p>
</div>
*/
}),
defaults: {
numList: [6, 12, 18, 24, 30],
currentNum: 12,
onInit: function () {
console.log('onInit')
},
onReady: function () {
console.log('onReady')
},
onViewChange: function (e) {
console.log('onViewChange', e.is)
},
onDispose: function () {
console.log('onDispose')
}
}
})
avalon.component('ms-section', {
template: '<div><ms-select /></div>'
})
var vm = avalon.define({
$id: 'test',
aaa: 'onViewChange的运作机制',
dd: '22',
cc: "555",
click: function () {
vm.$render.dispose()
avalon.clearHTML(document.body)
}
})
</script>
</head>
<body ms-controller="test">
<h1>{{@aaa}}</h1>
<p>onViewChange是比较组件的先后innerHTML,不一样才会触发</p>
<wbr ms-widget="{is:'ms-section',id:'eee'}"/>
<!--111-->
<button ms-click="@click" type="button">点我删除</button>
</body>
</html>