javascript - 与 Bootstrap 表内的嵌套循环进行淘汰赛绑定(bind)

Question

上图显示了数据与knockout数组绑定(bind)后的结果。然而预期的结果并不是这样的。我想要如图所示的以下结果

HTML 代码

<table class="table tableMini top10">
    <thead>
        <tr>
            <th>Workflow</th>
            <th style="width:190px;">Access</th>

        </tr>
    </thead>
    <tbody data-bind="foreach: Access_label">
        <tr>
            <td data-bind="text: $data.Application">
                <strong/>
            </td>
            <td>
                <input type="checkbox">
                </td>
            </tr>


            <tr>
                <td>
                    <table class="table tableMini top10">
                        <tbody data-bind="foreach: $data.ListAccessRights">
                            <tr>
                                <td data-bind="text: $data.Name">
                                    <span class="l45"/>
                                </td>
                                <td>
                                    <input type="checkbox">
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>


                </tr>
            </tbody>
        </table>

上图显示了服务器的响应

淘汰js代码

GetRoleList: function () {
        var self = this
        $.ajax({
            type: "GET",
            url: '/Employee/GetRoleList',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: false,
            success: function (data) {
                self.RoleList(data.Roles);
                self.Roles_Type_list(data.RoleType);
                self.Campaign_Type_list(data.CampaignType);
                self.Access_label(data.AccessRight);
            },
            error: function (err) {

                alert(err.status + " : " + err.statusText);

            }
        });


    }

我想知道如何执行循环以便获得想要的结果

Answer 1

我会这样做:

<table class="table tableMini top10">
    <thead>
        <tr>
            <th>Workflow</th>
            <th style="width:190px;">Access</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: Access_label">
        <tr>
            <td>
                <strong data-bind="text: Application"></strong>
            </td>
            <td>
                <input type="checkbox"/>
            </td>
        </tr>
        <!-- ko foreach: ListAccessRights -->
        <tr>
            <td class="l45" data-bind="text: Name"></td>
            <td>
                <input type="checkbox"/>
            </td>
        </tr>
        <!-- /ko -->
    </tbody>
</table>