Vin
unread,Jan 20, 2011, 12:16:18 PM1/20/11Sign in to reply to author
Sign in to forward
You do not have permission to delete messages in this group
Sign in to report message
Either email addresses are anonymous for this group or you need the view member email addresses permission to view the original message
to KnockoutJS
I am trying to do recursive templating on a tree using the mapping
plugin, but I can't get to have it rendered, unless I define separate
templates for each level.
In the following case, I want to reuse the mvvmTreeViewGroupTemplate
for mvvmTreeViewSubGroups as well, but this is not being rendered, is
this a bug or not implemented feature?
<script type="text/x-jquery-tmpl" id="mvvmTreeViewGroupTemplate">
<li>
<span data-bind="text: Title" class="mvvmTreeItemStyle"/></br/>
<ul data-bind='template: {
name: "mvvmTreeViewItemTemplate",
foreach: MvvmTreeItems,
beforeRemove: function(elem) { $
(elem).slideUp() },
afterAdd: function(elem) { $
(elem).hide().slideDown() }
}'>
<ul data-bind='template: {
name: "mvvmTreeViewSubGroupTemplate",
foreach: this.MvvmTreeItemSubGroups,
beforeRemove: function(elem) { $
(elem).slideUp() },
afterAdd: function(elem) { $
(elem).hide().slideDown() }
}'>
</ul>
</ul>
</li>
</script>
<script type="text/x-jquery-tmpl" id="mvvmTreeViewSubGroupTemplate">
<li>
<span data-bind="text: Title" class="mvvmTreeItemStyle"/></br/>
<ul data-bind='template: {
name: "mvvmTreeViewItemTemplate",
foreach: MvvmTreeItems,
beforeRemove: function(elem) { $
(elem).slideUp() },
afterAdd: function(elem) { $
(elem).hide().slideDown() }
}'>
</ul>
</li>
</script>
JSON looks like this,
var data = {
MvvmTreeItemGroups: [
{
Id: 1, Title: 'Group 1',
MvvmTreeItemSubGroups: [{
Id: 1, Title: 'Group 11',
MvvmTreeItems: [{ Id: 'i111', Title: 'Item 111' },
{ Id: 'i112', Title: 'Item 112'}]
},
{
Id: 1, Title: 'Group 121',
MvvmTreeItems: [{ Id: 'i121', Title: 'Item
121' }, { Id: 'i122', Title: 'Item 122'}]
}],
MvvmTreeItems: [{ Id: 'i11', Title: 'Item 11' }, { Id:
'i12', Title: 'Item 12'}]
},
{
Id: 2, Title: 'Group 2',
MvvmTreeItemSubGroups: [{
Id: 1, Title: 'Group 211',
MvvmTreeItems: [{ Id: 'i211', Title: 'Item
211' }, { Id: 'i212', Title: 'Item 212'}]
},
{
Id: 1, Title: 'Group 121',
MvvmTreeItems: [{ Id: 'i121', Title: 'Item
121' }, { Id: 'i122', Title: 'Item 122'}]
}],
MvvmTreeItems: [{ Id: 'i21', Title: 'Item 21' },
{ Id: 'i22', Title: 'Item 22'}]
}]
};