avalon 在组件内调用另一个组件,异步获取数据会出现不能删除标签,同步没问题
js 代码
function heredoc(fn) {
return fn.toString().replace(/^[^\/]+\/\*!?\s?/, '').
replace(/\*\/[^\/]+$/, '').trim().replace(/>\s*</g, '><')
}
var data = [{
id: '1',
title: "test1",
children: [{
id: "11",
title: "test11",
children: [{
id: "21",
title: "test21"
}]
}]
},
{
id: '2',
title: "test2"
}
]
var vm = avalon.define({
$id: "test",
treelist: []
})
setTimeout(function () {
vm.treelist = data;
}, 2000)
avalon.component('tree', {
template: heredoc(function () {
/*
<div>
<ul>
<li ms-for="(index, el) in @tree | get(0)" ms-class="['test', el.id == 1 && 'test2']" ms-click='@openSubTree(el)'>
<a ms-attr="[{href:el.title},(el.children != null && el.children.length > 0) && {title:el.title}]">{{el.title}}</a>
<xmp ms-widget="{is:'tree-child', treeItem: el}"></xmp>
</li>
</ul>
</div>
*/
}),
defaults: {
tree: [],
openSubTree: function (el) {
el.open = !el.open
}
}
})
avalon.component('tree-child', {
template: heredoc(function () {
/*
<ul class='child-item'>
<li ms-for="(index, el) in @treeItem.children | get(0)">
<span ms-click='@openSubTree(el)'>{{el.title}}</span>
<xmp ms-widget="{is:'tree-child', treeItem: childitem}"></xmp>
</li>
</ul>
*/
}),
defaults: {
treeItem: {},
openSubTree: function (el) {
el.open = !el.open
}
}
})
html 代码
<body ms-controller="test">
<xmp ms-widget="{is:'tree',tree:@treelist}"></xmp>
</body>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论