2013-04-09 79 views
1

我MVVM看起来是这样的:Knockout.js循环遍历父表的儿童

<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>内的孩子,其他人会告诉我“孩子”没有定义。

有关如何实现此目的的任何建议?

+0

是孩子公司只在孩子阵列的公司,或者是他们也在整个列表的公司? – 2013-04-09 08:30:13

回答

2

可以使用foreach没有一个容器元素,以显示孩子:

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

,并用新特性的帮助(在CompanyshowChildren等),你可以做儿童的显示隐藏:

演示JSFiddle.

如果你想使你想有显示孩子们的孩子相邻的香港,你可以阿智显示完整hierarcy与同列夏娃recursive templates. 大约有递归模板的一些问题latelly: