Knockout.js嵌套foreach绑定GroupedServices属性读取报错如何解决？

• 上下文引用错误：第一层foreach: services遍历到的每个元素为SimpleGroupedService实例，GroupedServices是当前实例的属性，而非根视图模型（$root）的属性，使用$root.GroupedServices会指向不存在的属性。
• 缺少第二层遍历：GroupedServices本身是数组类型，无法直接读取数组的Name属性，必须嵌套一层foreach遍历该数组，才能拿到每个SimpleServiceDTO实例的属性。

<section class="list-container">
    <div>
        <!-- ko foreach: services -->
        <header>
            <i class="icon-employee"></i>
            <span data-bind="text: $root.shell.substring(ServiceTypeName, 200)"></span>
        </header>
        <ul>
            <!-- 新增第二层foreach遍历当前分组下的服务列表 -->
            <!-- ko foreach: GroupedServices -->
            <li>
                <!-- 当前上下文为SimpleServiceDTO实例，直接读取属性即可 -->
                <a href="" data-bind="text: Name"></a>
            </li>
            <!-- /ko -->
        </ul>
        <!-- /ko -->
    </div>
</section>

如果嵌套层级较多，推荐用as给遍历项起别名，完全避免上下文指代错误：

<section class="list-container">
    <div>
        <!-- ko foreach: { data: services, as: 'serviceGroup' } -->
        <header>
            <i class="icon-employee"></i>
            <span data-bind="text: $root.shell.substring(serviceGroup.ServiceTypeName, 200)"></span>
        </header>
        <ul>
            <!-- ko foreach: { data: serviceGroup.GroupedServices, as: 'serviceItem' } -->
            <li>
                <a href="" data-bind="text: serviceItem.Name"></a>
            </li>
            <!-- /ko -->
        </ul>
        <!-- /ko -->
    </div>
</section>

内容的提问来源于stack exchange，提问作者lonelydev101