Rekursive Vorlagen mit dem KnockoutJS -Mapping -Plugin

Question

Ich versuche rekursive Vorlagen auf einem Baum mit der Ko.Mapping Plugin, aber ich kann es nicht machen lassen, es sei denn, ich definiere getrennt Vorlagen für jede Ebene.

Im folgenden Fall möchte ich die wiederverwenden MVVMTREEVIEWGROUPEMPLATE zum mvvmtreeviewSubGroups Ist dies auch ein Fehler oder nicht implementierter Feature?

<div id="treeViewArea">
    <ul data-bind='template: { 
                            name: "mvvmTreeViewGroupTemplate", 
                            foreach: MvvmTreeItemGroups,
                            beforeRemove: function(elem) { $(elem).slideUp() },
                            afterAdd: function(elem) { $(elem).hide().slideDown() } 
                            }'>
    </ul>
</div>
        <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 und Skript sehen so aus,

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'}] 
                }] 
        }; 

var viewModel = ko.mapping.fromJS(data);
        console.log(viewModel);
        ko.applyBindings(viewModel, treeViewArea);

Answer 1

Ich bekam eine Antwort auf meine Frage in Dieser Google -Thread. Es ist nicht gerade ein "rekursives Vorlagen" -Anproblem, es liegt daran, dass die Vorlage nicht weiß, wie man es rendert, wenn es kein Array mit diesem Namen gibt.

Es gibt zwei Möglichkeiten, das Problem zu beheben:

1. Überprüfen Sie, ob mvvmtreeItemGroups -Array tatsächlich existiert, bevor Sie die Vorlage so rendern, so,

   {{if $data.MvvmTreeItemGroups }}       
       <ul data-bind='template: { 
       name: "mvvmTreeViewGroupTemplate", 
       foreach: MvvmTreeItemGroups }'> 
       </ul>                 
   {{/if}}
   

2. Verwenden Sie das in Schlüsselwort, um mvvmtreeItemGroups zu überprüfen

   {if 'MvvmTreeItemGroups' in $data}}
       <ul data-bind='template: { 
       name: "mvvmTreeViewGroupTemplate", 
       foreach: MvvmTreeItemGroups
       }'> 
       </ul> 
   {{/if}}
   

Die volle Geige ist bei http://jsfiddle.net/mikekidder/xs7sy/