2

ノックアウトで多次元配列を扱う標準的な方法は何ですか?

KnockoutJS を使用して動的テーブルを生成するとします。テーブルの行と列は、observableArrays から生成されます。各セル内のデータもオブザーバブル (テキスト ボックスにバインドされたデータ) です。各セル内のデータも、ノックアウト検証で検証する必要があります。

私はそのようなものを使ってテキストボックスの値を生成しています:

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

これは、tbody の 2 つの 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[][] 多次元配列を再生成し、実際の値はそれぞれ観察可能です。

これは私が持っている典型的な問題の例です。この特定の例では、数量値 (セル) の最小値と最大値を検証します。しかし、行または列が少ないテーブルを再バインドすると、次の例外 (Uncaught TypeError: Cannot read property 'rules' of undefined) が発生します。行と列の observableArrays を変更しています。バインディング data-bind="$root.qty[$index()][$parentContext.$index()]" は無効になりました。バウンド。

私は何が欠けていますか？

ありがとう！

4

1 に答える 1

0

ビューモデルのコードをもっと見ずにあなたの質問に答えることはできませんが、あなたのやり方は複雑に聞こえます。-ノックアウトが追加/削除を評価する順序を制御する方法を理解できない限り、インデックス作成の問題が発生します。ただし、テーブルの問題をどのように解決したかを説明します。

また、つまり、特に8以下は、JavaScriptコードを変更するテーブルについて非常に気難しいです。テストテストテスト！

私は基本的にサンダーソンの単純なグリッドを変更しました-それをチェックして、それがあなたのために機能するかどうかを確認します。

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

多次元配列を実行する代わりに、列を1つの配列にし、次に行を別の配列にします。行配列の各項目は、実際には、キーとして異なる列名を持ち、値としてオブジェクトを持つオブジェクトです。

それで....

//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-14T22:35:32.613 に答える