在 Knockout JS 中处理多维数组的最佳方法是什么？答案

【问题标题】：What is the best way of handling multi dimensional arrays in Knockout JS?在 Knockout JS 中处理多维数组的最佳方法是什么？
【发布时间】：2013-03-03 01:42:41
【问题描述】：

用 Knockout 处理多维数组的标准方法是什么？

假设您想使用 KnockoutJS 生成一个动态表。表的行和列是从 observableArrays 生成的。每个单元格内的数据也是可观察的（绑定到文本框的数据）。每个单元格内的数据也需要通过敲除验证进行验证。

我正在使用类似的东西来生成我的文本框的值：

data-bind="value: $root.qty[$index()][$parentContext.$index()]"

这是 tbody 的两个 foreach 内：

<tbody data-bind="foreach: $root.styleColors">
    <tr>
        <td data-bind="text: StyleColorName, visible: $root.showFirstColumn"></td>
        <!-- ko foreach: $root.sizes -->
            <td>
                <input type="text" class="qty" data-bind="value: $root.qty[$index()][$parentContext.$index()]"/>
            </td>
        <!-- /ko -->
    </tr>
</tbody>

它运作良好，但我需要能够根据我正在编辑的项目动态更改数据。一旦我更改列数或行数，就会导致各种问题。我使用throttle 扩展器减少了很多这些问题，方法是让渲染在渲染之前等待行和列都可以观察到。

每次更改当前编辑的项目时，我都会使用简单的 javascript 数组重新生成 qty[][] 多维数组，每个实际值都是可观察的。

这是我遇到的一个典型问题的示例。对于这个特定示例，我验证了我的数量值（单元格）的最小值和最大值。但是当我重新绑定包含较少行或较少列的表时，我得到以下异常（未捕获的类型错误：无法读取未定义的属性“规则”）。我正在更改行和列的 observableArrays，绑定 data-bind="$root.qty[$index()][$parentContext.$index()]" 不再有效，因为其中一个索引已超出绑定。

我错过了什么？

谢谢！

【问题讨论】：

标签： javascript knockout.js knockout-2.0 knockout-validation

【解决方案1】：

如果不查看更多视图模型代码，我无法真正回答您的问题，但您的方式听起来很复杂。 - 除非您能弄清楚如何控制淘汰赛评估添加/删除的顺序，否则您将遇到索引问题。不过我会告诉你我是如何解决桌子问题的。

另外 - 即，尤其是 8 向下，对 javascript 代码修改表非常挑剔。测试测试测试！

我基本上修改了桑德森的简单网格 - 我会检查一下，看看它是否适合你。

https://github.com/SteveSanderson/knockout/tree/gh-pages/examples/resources

不要使用多维数组，而是将一个数组作为您的列，然后将另一个数组作为您的行。行数组中的每一项实际上都是一个对象，以不同的列名作为键，对象作为值。

所以....

//two columns
this.columns = ko.observableArray(["Column1","Column2"]);

//two Rows
this.rowData = ko.observableArray([
{Column1:{StyleColorName:"Top Left"},Column2:{StyleColorName:"Top Right"}},
{Column1:{StyleColorName:"Bottom Left"},Column2:{StyleColorName:"Bottom Right"}}
]);

和标记

<thead>
    <tr>
        <th data-bind="visible:showFirstColumn">First Column</th>
        <!-- ko foreach: $root.sizes -->
        <th data-bind="text:$data" ></th>
        <!-- /ko -->
    </tr>
</thead>
<tbody data-bind="foreach: rowData">
    <tr>
        <td data-bind="text: StyleColorName, visible: $root.showFirstColumn"></td>
        <!-- ko foreach: columns -->
            <td>
                <input type="text" class="qty" data-bind="value:$parent[$data].StyleColorName()"/>
            </td>
        <!-- /ko -->
    </tr>
</tbody>

【讨论】：