avalon2
Version:
an elegant efficient express mvvm framework
57 lines (55 loc) • 2.1 kB
HTML
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../../dist/avalon.js"></script>
<script>
var vm = avalon.define({
$id: 'test',
bbb: '其他内容',
show: function () {
console.log('这是页面的事件')
}
});
function heredoc(fn) {
return fn.toString().replace(/^[^\/]+\/\*!?\s?/, '').
replace(/\*\/[^\/]+$/, '').trim().replace(/>\s*</g, '><')
}
avalon.component('ms-number', {
template: heredoc(function () {
/*
<div>
<button type="button" :on-click="@reduce">--</button>
<input readonly :attr="{value:@num}">
<button type="button" :on-click="@add" >++</button>
</div>
*/
}),
defaults: {
num: 21,
reduce: function () {
var a = this.num
a -= 1;
this.num = a < 0 ? 0 : a
},
add: function () {
this.num += 1;
console.log(this.$hashcode, 'hash')
}
}
})
</script>
</head>
<body>
<h1>组件的VM</h1>
<p>组件的VM理论上是继承了它上方的所有组件的属性与方法,
但本例直接在组件模板上使用defaults中没有声明的方法是一个不好的写法</p>
<div>template中只允许使用defaults中的变量, slot中可以用上层VM中的变量,但最好都能过ms-widget对象传入</div>
<div ms-controller="test">
<xmp is='ms-number' :widget='{show: @show}' ></xmp>
{{@bbb}}
</div>
</body>
</html>