简化的 Knockout 嵌套循环

【问题标题】：Simplified Knockout nested loops简化的 Knockout 嵌套循环
【发布时间】：2013-12-04 17:50:01
【问题描述】：

我的项目是根据下面的 viewModel 创建一个日期网格。该代码有效，但我想知道是否有更简单的方法可以访问我的第一个内部数组“CalendarDateBlocks”。

// data = products.productUnits.CalendarDateBlocks
function productViewModel (data) {
    var self = this;
    window.viewModel = self;
    self.productsList  = ko.observable(data);
}

敲除html绑定表

<table>
    <tr>
        <th>Product</th>
        <th>Unit</th>
        <!-- ko foreach: window.viewModel.productsList-->
           <!-- ko if: ($index()===0)-->
              <!-- ko foreach: ProductUnits -->
                 <!-- ko if: ($index()===0)-->
                    <!-- ko foreach: CalendarDateBlocks -->
                       <th data-bind="text: BlockDate"></th>
                    <!-- /ko -->
                 <!-- /ko -->
              <!-- /ko -->
           <!-- /ko -->
        <!-- /ko -->
    </tr>
</table>

来自服务器的 JSON 代码

{
   "productsList":[
      {
         "ProductId":1,
         "Title":"Standard",
         "ImageGalleryId":10,
         "ProductUnits":[
            {
               "ProductUnitId":1,
               "ProductId":1,
               "CalendarBlocks":[
                  {
                     "ProductId":1,
                     "ProductUnitId":1,
                     "BlockDate":"09/01/2013"
                  },
                  {
                     "ProductId":1,
                     "ProductUnitId":1,
                     "BlockDate":"09/02/2013"
                  }
               ]
            },
            {
               "ProductUnitId":2,
               "ProductId":1,
               "CalendarBlocks":[
                  {
                     "ProductId":0,
                     "ProductUnitId":0,
                     "BlockDate":"09/01/2013"
                  },
                  {
                     "ProductId":0,
                     "ProductUnitId":0,
                     "BlockDate":"09/02/2013"
                  }
               ]
            },
            {
               "ProductUnitId":3,
               "ProductId":1,
               "CalendarBlocks":[
                  {
                     "ProductId":0,
                     "ProductUnitId":0,
                     "BlockDate":"09/01/2013"
                  },
                  {
                     "ProductId":0,
                     "ProductUnitId":0,
                     "BlockDate":"09/02/2013"
                  }
               ]
            },
            {
               "ProductUnitId":4,
               "ProductId":1,
               "CalendarBlocks":[
                  {
                     "ProductId":0,
                     "ProductUnitId":0,
                     "BlockDate":"09/01/2013"
                  },
                  {
                     "ProductId":0,
                     "ProductUnitId":0,
                     "BlockDate":"09/02/2013"
                  }
               ]
            }
         ]
      }
   ]
};

【问题讨论】：

• 你为什么在那里使用 $index()===0 if 语句？
• 我们正在创建一个日历网格，第一行 是包含这些列 [Product,Unit,Date,Date,Date, etc.] 每个 Product 包含多个 ProductUnits 并且每个单元包含多个 BlockDates。对于标题，我们只需要获取第一行日期。 防止循环多次通过它。这带来了我发布问题的重点和原因，这可以简化吗？
• 如果我已经发布的答案不能满足您的要求，请创建一个小提琴，以便我们了解您想要实现的目标
• 我为我的原始工作代码创建了一个 jsfiddle 示例。 jsfiddle.net/X65Dm