avalon2
Version:
an elegant efficient express mvvm framework
63 lines (60 loc) • 2.25 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../dist/avalon.js"></script>
</head>
<body>
<blockquote>
<div ms-controller="tree">
<ul ms-for="el in @tree">{{el.text}}
<span ms-click='@toggle($event,el)' ms-text="@trigger(el)"></span>
<div ms-html="@tmpl" ms-visible="el.subtree.length " ></div>
</ul>
</div>
<script>
avalon.define({
$id: "tree",
trigger: function (el) {
if (el.subtree && el.subtree.length) {
return el.open ? '[+]' : '[-]'
} else {
return ''
}
},
toggle: function (event, elem) {
var el = event.target
elem.open = el.open = !el.open
var tree = el.nextElementSibling
tree.style.display = el.open ? '' : 'none'
},
tree: [
{text: "aaa", open: 1, subtree: [
{text: 1111, open: 1, subtree: []},
{text: 2222, open: 1, subtree: [
{text: 777, open: 1, subtree: []}
]},
{text: 3333, open: 1, subtree: [
{text: 8888, open: 1, subtree: []},
{text: 999, open: 1, subtree: []}
]}
]},
{text: "bbb", open: 1, subtree: [
{text: 4444, open: 1, subtree: []},
{text: 5555, open: 1, subtree: []},
{text: 6666, open: 1, subtree: []}
]},
{text: "ccc", open: 1, subtree: []},
{text: "ddd", open: 1, subtree: []},
{text: "eee", open: 1, subtree: [
{text: 1234, open: 1, subtree: []}
]},
{text: "fff", open: 1, subtree: []}
],
tmpl: "<ul ms-for='el in el.subtree'><li>{{el.text}}<span ms-click='@toggle($event,el)' ms-text='@trigger(el)'></span><div ms-html='@tmpl' ms-visible='el.subtree.length '>xxx</div></li></ul>"
})
</script>
</blockquote>
</body>
</html>