knockout中foreach雙重嵌套

在開發過程中，一個需求是背景傳輸table資料，分為header和data兩部分，header代表表頭，data是json對象，代表每個字段的具體值。table是個json數組。

問題是：header代表的表頭列數不定，data代表的行數也不定，要實作向表格添加資料。

解決方案：

html代碼：

<table>
     <thead> 
            <tr data-bind="foreach:Header">
             	<th data-bind="text:header"></th>
           </tr>
    </thead>
    <tbody data-bind="foreach:{data:Order, as:'order'}">
         <tr data-bind="foreach:{data:order.items,as:'item'}">
              <td data-bind="text:item.it"></td>
         </tr>
    </tbody>
</table>
           

js代碼：

var viewModel={
  Header:ko.observableArray([]),
  Order:ko.observableArray([])
};
ko.applyBindings(viewModel);
//Header正常push就好
$.each(Order, function(k,v){
    var value =v;
    var items=[];
    $.each(value, function(key, val){
        items.push({
             it:val
        });
     });
     viewModel.Order.push({
        item:items,
        //textColor等其他參數
     });
});
     
           

主要思想就是，講item初始化為數組，然後再放入Order中，而不是一開始就在Order中。