2013-04-09 105 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: