Json Knockout.js在表中父级的子级上循环

我的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>

<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>

职能公司（数据）{
this.name=ko.observable（data.name）；
this.legal_form=ko.可观察（data.legal_form）；
本公司编号=可观察的ko（数据公司编号）；
this.type_account=ko.observable（data.type_account）；
this.type_supplier=ko.可观察（data.type_supplier）；
this.type_competitor=ko.可观察（data.type_competitor）；
this.type_other=ko.可观察（data.type_other）；
this.children=ko.observearray（data.child）；
}
函数CompanyListViewModel（）{
//资料
var self=这个；
self.companys=ko.observearray（[]）；
$.getJSON（Routing.generate（'contacts\u companys\u get\u json'），函数（allData）{
var mappedCompanies=$.map（所有数据，函数（项）{返回新公司（项）}）；
自营公司（MappedCompanys）；
});  
}
应用绑定（新的CompanyListViewModel（））；

我的观点是这样的：

<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>

<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>

我想为母公司拥有的每个子公司添加隐藏的

，并在父公司之前添加加号以扩展隐藏的

问题是我只能访问原始父级中的子级

，否则我们会告诉我“子级”没有定义

关于如何实现这一点有什么建议吗？

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

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

在新属性的帮助下（如

公司

上的

showChildren

），您可以执行儿童的显示隐藏：

演示

如果您想用相同的列显示完整的层次结构，那么您需要显示您可以使用的子营地的子营地 最近有一些关于递归模板的问题：

---

子公司是否仅在公司的子阵列中，还是也在公司的总体列表中？