Question

当我看到我的淘汰页面的一些结果时，我正在编写一个演示，我很震惊。这是结果： enter image description here

我所做的很简单，当有人要求加载数据时，我会执行以下操作：

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

所有服务器方法结果都被缓存，并且它们非常快。颜色和ProductModel也是可观察的，因为我想让用户能够为每个打印的项目更改产品的“颜色”或“模型”。我加载的数据量只有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>

除了“页面”之外的任何建议都表示赞赏。

更新1

我发现哪个是问题，但现在我不知道如何解决它。问题是我如何编写选择foreach项目。可能有重复的foreach项目。怎么可以避免呢？

更新2

我找到的最佳解决方案是在我的标记中使用Knockoutjs If-binding：http://knockoutjs.com/documentation/if-binding.html

Answer 1

你有没有在网上找到这个，或者你可以为此拼凑一个快速的jsfiddle，因为它真的不应该接近那么长的时间！

说，为什么要循环遍历AJAX调用的结果并将值放入数组？

您是否尝试过只进行一次AJAX调用并查看当时的效果？这是您页面上的大部分HTML，还是还有更多？我有兴趣看看它是否是数据绑定导致样式计算和布局时间如此之大，因为它实际上不应该如此。

Knockoutjs速度非常慢，有100条记录

1 个答案: