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

Knockout处理多维数组的标准方式是什么？在Knockout JS中处理多维数组的最佳方式是什么？

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

我使用类似的东西产生我的文本框的值：

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

这是内部的两个的foreach为TBODY：

<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 [] []多维数组，每个实际值都是可观察值。

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

我错过了什么？

谢谢！

来源

2013-03-14 EtienneT

我不能在没有看到更多viewmodel代码的情况下真正回答你的问题，但你的方式听起来很复杂。 - 除非你能弄清楚如何控制knockout评估添加/删除的顺序，以便在索引问题中运行。我会告诉你我是如何解决表问题的。另外 - 也就是说，特别是8个向下，对JavaScript代码修改表非常挑剔。测试测试测试！

我基本上修改了sandersons简单的网格 - 我会检查出来，看看它是否适合你。

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

Aaannd标记

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

来源

2013-03-14 22:35:32 scaryman

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

回答

相关问题