0

ノックアウトページの結果を見たとき、私はデモを書いていて、ショックを受けました。結果は次のとおりです。 ここに画像の説明を入力

私がしていることは非常に簡単です。誰かがデータをロードするように頼んだとき、私は次のことを行います:

            self.items = ko.observableArray([]);
            self.colors = ko.observableArray([]);
            self.productModels = ko.observableArray([]);

            self.loadData = function() {
            var buffer;

            $.getJSON('/Product/InventoryData')
                .success(function(allData) {
                    buffer = [];
                    buffer = $.map(allData, function(item) { return new SDF.Data.DTO.ProductDto(item); });
                    self.items(buffer);
                })
                .error(function() {
                    alert("error on load data");
                });

            $.getJSON('/Product/GetColors')
                .success(function(allData) {
                    buffer = [];
                    ko.utils.arrayForEach(allData, function (item) {
                        buffer.push(item);
                    });
                    self.colors(buffer);
                })
                .error(function () {
                    alert("error on load colors");
                });

            $.getJSON('/Product/GetProductModels')
                .success(function (allData) {
                    buffer = [];
                    ko.utils.arrayForEach(allData, function (item) {
                        buffer.push(item.Name);
                    });
                    self.productModels(buffer);
                })
                .error(function () {
                    alert("error on load product models");
                });
        };

サーバーメソッドの結果はすべてキャッシュされ、非常に高速です。各印刷アイテムの製品の「色」または「モデル」を変更する機能をユーザーに提供したいので、色と ProductModels も観察可能です。ロードするデータの量はわずか 100 アイテムです。

私のhtmlに続いて：

        <tbody data-bind="foreach: items">
        <tr>
            <td>
                <input type="text" data-bind="value: name" />
            </td>
            <td>
                <select data-bind="options: $root.colors, optionsCaption: 'Choose...'">
                </select>
            </td>
            <td>
                <input type="number" data-bind="value: price" />
            </td>
            <td>
                <select data-bind="options: $root.productModels, optionsCaption: 'Choose...'">
                </select>
            </td>
            <td>
                <label data-bind="text: qty">
                </label>
            </td>
            <td>
                <a href="#" id="product-sell">Sell</a>
            </td>
            <td>
                <a href="#" id="product-edit"></a>
            </td>
        </tr>
    </tbody>

「page it」以外の提案は大歓迎です。

更新 1

どちらが問題であるかはわかりましたが、どうすれば解決できるかわかりません。問題は、selects foreach Item の書き方です。おそらく各アイテムの再描画があります。どうすればそれを回避できますか？

更新 2

私が見つけた最善の解決策は、マークアップで Knockoutjs If-binding を使用することです: http://knockoutjs.com/documentation/if-binding.html

4

1 に答える 1

0

どこかでこれをオンラインで入手したことがありますか、それとも簡単な jsfiddle をまとめてくれませんか?

そうは言っても、なぜ AJAX 呼び出しの結果をループして値を配列に入れているのでしょうか?

AJAX 呼び出しを 1 つだけ実行して、時間にどのような影響があるかを確認しましたか? それがあなたのページにあるほとんどの html ですか、それとももっとたくさんありますか? スタイルの計算とレイアウト時間が非常に長くなる原因となっているのがデータ バインディングであるかどうかを確認したいと思います。

于 2013-01-28T12:01:48.807 に答える