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

处理带有敲除的多维数组的标准方法是什么？

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

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

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

这是T车身的两个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>

它运行良好，但我需要能够根据我正在编辑的项目动态更改数据。一旦我改变了列或行的数量，就会引起各种各样的问题。我使用扩展程序减少了很多这些问题，使渲染在渲染之前等待行和列都可见

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

这是我遇到的一个典型问题的例子。对于这个特定的示例，我验证数量值（单元格）的最小值和最大值。但是，当我重新绑定一个包含更少行或更少列的表时，我得到了以下例外（uncaughttypeerror:cannotreadproperty'rules'of undefined）。我正在更改行和列的ObservalArrays，绑定数据bind=“$root.qty[$index（）][$parentContext.$index（）]”不再有效，因为其中一个索引超出了绑定范围

我错过了什么

---

谢谢

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

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

我基本上修改了sandersons simple grid——我会检查一下，看看它是否适合你

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

所以

//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"}}
]);

A标注标记

<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>

第一列