1

我的 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>为母公司拥有的每个孩子添加 hidden 并在父公司之前添加一个加号以扩展 hidden 。

问题是我只能访问原始父母中的孩子，<tr>否则会告诉我“孩子”没有定义。

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

4

1 回答 1

2

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

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

并且在新属性的帮助下（如） showChildren，Company您可以对孩子们进行展示隐藏：

演示JSFiddle。

如果您想显示具有相同列的完整层次结构，那么您希望必须显示可以使用递归模板实现的子campanies 的子项。 最近有一些关于递归模板的问题：

于 2013-04-09T08:47:58.200 回答