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>

我的观点如下：

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

我想为母公司的每个孩子添加隐藏的<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），您可以执行儿童节目隐藏：

演示JSFiddle.

如果您希望显示具有相同列的完整层次，那么您希望显示子公共场所的子项，您可以使用recursive templates.来实现最近有一些关于递归模板的问题：

Knockout.js循环在父表的子项中

1 个答案: