avalon2
Version:
an elegant efficient express mvvm framework
81 lines (75 loc) • 3.35 kB
HTML
<!DOCTYPE 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">
<wbr ms-widget="{is:'tree',tree: @data}" />
</div>
<script>
function heredoc(fn) {
return fn.toString().replace(/^[^\/]+\/\*!?\s?/, '').
replace(/\*\/[^\/]+$/, '').trim().replace(/>\s*</g, '><')
}
var treeID = 0
avalon.component('tree', {
template: heredoc(function () {
/*
<ul>
<li ms-for="(index, el) in @tree | get(0)">{{el.text}}
<span ms-click='@openSubTree(el)' ms-text="@changeIcon(el)"></span>
<div ms-visible="el.open" ms-html="@renderSubTree(el)">
</div>
</li>
</ul>
*/
}),
defaults: {
tree: [],
renderSubTree: function (el) {
return el.subtree.length ? '<wbr is="tree" ms-widget="{$id:\'tree_' + (++treeID) + '\', tree: el.subtree}" />' : ''
},
openSubTree: function (el) {
el.open = !el.open
},
changeIcon: function (el) {
return el.open && el.subtree.length ? '[-]' : '[+]'
}
}
})
avalon.define({
$id: "tree",
data: [
{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: 9999, open: 1, subtree: [
{text: '司徒正美', 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: []}
]
})
</script>
</blockquote>
</body>
</html>