在Knockout JS中處理多維數組的最佳方式是什麼？

Question

Knockout處理多維數組的標準方式是什麼？

假設你想用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（）]」不再有效，因爲其中一個索引超出了界。

我錯過了什麼？

謝謝！

Answer 1

我不能在沒有看到更多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>