avalon2
Version:
an elegant efficient express mvvm framework
70 lines (67 loc) • 2.4 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>SPA</title>
<script src="../../dist/avalon.js"></script>
<script>
function heredoc(fn) {
return fn.toString().replace(/^[^\/]+\/\*!?\s?/, '').
replace(/\*\/[^\/]+$/, '').trim().replace(/>\s*</g, '><')
}
avalon.component('ms-number', {
template: heredoc(function () {
/*
<div cached="true">{{@num}}<input :duplex-number="@num"/>
<button type="button" :on-click="@onPlus">+++</button>
</div>
*/
}),
defaults: {
num: 1,
onPlus: function () {
this.num++;
},
onDispose: function () {
console.log('dispose')
}
}
});
avalon.component('ms-header', {
template: heredoc(function () {
/*
<div cached="true">
<h4>{{@title}}</h4>
<p><button type="button" :on-click="@onChangeTitle">change</button></p>
</div>
*/
}),
defaults: {
title: "这是标题",
onChangeTitle: function (e) {
this.title = '改变了title' + (new Date - 0);
},
onDispose: function () {
console.log('dispose')
}
}
});
var vm = avalon.define({
$id: 'test',
view: ''
})
window.addEventListener('hashchange', function (e) {
var hash = e.newURL.split('#/')[1];
vm.view = '<' + hash + ' cached="true" ms-widget="{$id:\'' + hash + '\'}"></' + hash + '>'
})
</script>
</head>
<body ms-controller="test">
<ul>
<li><a href="#/ms-header">ms-header</a></li>
<li><a href="#/ms-number">ms-number</a></li>
</ul>
<div style="background-color:#f0f0f0;" ms-html="@view">
</div>
</body>
</html>