Question

我试图做使用ko.mapping plugin树递归模板，但是我不能把它渲染，除非我定义对每个级别独立 模板。

在以下情况下，我想重用mvvmTreeViewGroupTemplate 为mvvmTreeViewSubGroups为好，但这不是被渲染，是 这个错误或未实现的功能？

<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和脚本看起来像这样，

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

我this google thread得到的回答了我的问题。这不完全是一个'递归模板'问题，这是因为如果没有该名称的数组，模板不知道如何呈现。

有两种方法来解决该问题：

1. 检查MvvmTreeItemGroups阵列 渲染 模板，像这样前确实存在，

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

2. 使用的关键字检查 MvvmTreeItemGroups真的存在

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

小提琴在http://jsfiddle.net/mikekidder/Xs7sy/