使用Knockout.js的系列列

Question

我有一个可观察的美国StateCodes集合和一个布尔指示符。我将数据绑定到一个类似的视图：

<tbody data-bind="foreach: states">
    <tr>
        <td data-bind="text: stateName"></td>
        <td><input type="checkbox" data-bind="checked: useState"></td>
    </tr>
</tbody>

当我运行它时，我得到每个状态的预期行：

但我想要的是：

我一直花时间在谷歌周围徘徊，我没有太多运气。任何人都可以给我一个资源或者给我一些入门代码来推动我的发展吗？

提前致谢。

Answer 1

只需将foreach移动到行而不是为每个行创建一行 -

<tbody>
    <tr data-bind="foreach: states">
        <td data-bind="text: stateName"></td>
        <td><input type="checkbox" data-bind="checked: useState"></td>
    </tr>
</tbody>

Answer 2

我做了这样的事。希望我们不会在不久的将来增加美国各州的数量。

<tbody >
    <tr data-bind="foreach: states.slice(0,11)">
        <td>
            <label data-bind="text:statesId" class="hidden"></label>
            <input type="checkbox" data-bind="checked: useState">
            <label data-bind="text:stateName"></label>
        </td>
    </tr>
    <tr data-bind="foreach: States.slice(12,23)">
        <td>
            <label data-bind="text:statesId" class="hidden"></label>
            <input type="checkbox" data-bind="checked: useState
            <label data-bind="text:stateName"></label>
        </td>
    </tr>
    <tr data-bind="foreach: States.slice(24,35)">
        <td>
            <label data-bind="text:statesId" class="hidden"></label>
            <input type="checkbox" data-bind="checked: useState
            <label data-bind="text:stateName"></label>
        </td>
    </tr>
    <tr data-bind="foreach: States.slice(36,47)">
        <td>
            <label data-bind="text:statesId" class="hidden"></label>
            <input type="checkbox" data-bind="checked: useState
            <label data-bind="text:stateName"></label>
        </td>
    </tr>
    <tr data-bind="foreach: States.slice(48,51)">
        <td>
            <label data-bind="text:statesId" class="hidden"></label>
            <input type="checkbox" data-bind="checked: useState
            <label data-bind="text:stateName"></label>
        </td>
    </tr>
</tbody>