json - Knockout.js遍历表中父级的子级

Question

我的MVVM如下所示:

<script type="text/javascript">

function Company(data) {

    this.name = ko.observable(data.name);
    this.legal_form = ko.observable(data.legal_form);
    this.company_number = ko.observable(data.company_number);
    this.type_account = ko.observable(data.type_account);
    this.type_supplier = ko.observable(data.type_supplier);
    this.type_competitor = ko.observable(data.type_competitor);
    this.type_other = ko.observable(data.type_other);
    this.children = ko.observableArray(data.child);
}

function CompanyListViewModel() {
    // Data
    var self = this;
    self.companies = ko.observableArray([]);

    $.getJSON(Routing.generate('contacts_companies_get_json'), function(allData) {
        var mappedCompanies = $.map(allData, function(item) { return new Company(item) });
        self.companies(mappedCompanies);
    });  
}

ko.applyBindings(new CompanyListViewModel());

</script>

我的 View 如下所示:

<tbody data-bind="foreach: companies">
       <tr>
           <td>
               <a href="#" class="title">
                   <span data-bind="text: name"></span> <span data-bind="text: legal_form"></span>
               </a>        
           </td>
           <td data-bind="if:$data.company_number"><span data-bind="text: company_number"></span></td>
           <td><span data-bind="if: type_account" ><i class="icon-check"></i></span></td>
           <td><span data-bind="if: type_supplier" ><i data-bind="if: type_supplier" class="icon-check"></i></span></td>
           <td><span data-bind="if: type_competitor" ><i data-bind="if: type_competitor" class="icon-check"></i></span></td>
           <td><span data-bind="if: type_other" ><i data-bind="if: type_other" class="icon-check"></i></span></td>
           <td><a href="#" class="btn btn-mini">Details</a></td>
       </tr>
   </tbody>

我想为母公司拥有的每个 child 添加隐藏的 <tr>，并在父公司之前添加一个加号以展开隐藏的。

问题是我只能在原始父 <tr>内访问子级，否则将告诉我未定义“子级”。

关于如何实现这一目标的任何建议？

Answer 1

您可以使用不带容器元素的foreach来显示子代:

<tbody data-bind="foreach: companies">
       <tr>
           <!-- company columns -->
       </tr>
       <!-- ko foreach: children -->
           <tr>
              <!-- children columns -->
           </tr>
      <!-- /ko -->
</tody>

借助新属性(例如 showChildren上的 Company)，您可以隐藏 children 的衣服:

示范 JSFiddle.

如果要使用相同的列显示完整的层次结构，以便要显示子钟楼的子级，则可以使用 recursive templates.实现
最近有一些关于递归模板的问题:

Recursive template with knockout js

Working with Knockout 'foreach' looping through multidimensional array