<!DOCTYPE html>
<html>
<head>
<title>ms-attr-*</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="avalon.js"></script>
<script>
avalon.define("test", function(vm) {
vm.toggle = true
vm.aaa = "aaa"
vm.click = function() {
vm.toggle = !vm.toggle
console.log(vm.toggle)
}
vm.change = function() {
vm.aaa = "bbb"
}
})
var XBooPrototype = Object.create(HTMLElement.prototype);
XBooPrototype.detachedCallback = function() {
console.log("remove")
}
XBooPrototype.attachedCallback = function() {
console.log("add")
}
var XBoo = document.registerElement('x-boo-ir2', {
prototype: XBooPrototype
});
window.onload = function() {
var xboo = new XBoo()
var body = document.body
body.appendChild(xboo);
body.removeChild(xboo);
}
</script>
<style>
.aaa {
background: goldenrod;
}
.bbb{
background: green;
}
</style>
</head>
<body ms-controller="test">
<div ms-hover="{{aaa}}:toggle" ms-click="click">ddddd</div>
<button ms-click="change">点我</button>
</body>
</html>