avalon2
Version:
an elegant efficient express mvvm framework
42 lines (38 loc) • 1.67 kB
HTML
<html>
<head>
<title>ms-validate</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="../../dist/avalon.js"></script>
<script>
var vm = avalon.define({
$id: 'test',
toggle: 1,
html: "<strong><span>链接</span></strong>",
button: {//注意这里不能以 $开头
buttonText: "VM内容"
}
})
avalon.component('ms-button', {
template: '<button type="button"><span><slot name="buttonText"></slot></span></button>',
defaults: {
buttonText: "默认内容"
},
soleSlot: 'buttonText'
})
</script>
</head>
<body ms-controller="test">
<h1>avalon2的组件在高级浏览器拥有4种声明方式</h1>
<p>换言之,一共可以用4种元素声明组件,包括ms-button与xmp, wbr, template</p>
<p>ms-button为自定义标签, 标签名已经声明了组件的类型, 可以省去ms-widget配置对象</p>
<p>其他方式,必须使用ms-widget配置对象,里面的is是必须存在的</p>
<xmp ms-widget='[{is:"ms-button"},@button]'></xmp>
<wbr ms-widget='[{is:"ms-button"},@button]' ms-attr="{title:@toggle}"/>
<ms-button><a ms-html='@html'></a></ms-button>
<template ms-widget='[{is:"ms-button"}]' ms-attr="{title:@toggle}"></template>
<div><ms-button></ms-button></div>
<div ms-html="@html"></div>
</body>
</html>