Kendo ui MVVM绑定到剑道网格非常慢？

我正在尝试将ViewModel绑定到剑道数据源，而剑道数据源又被提供给剑道网格。在这一点上没什么特别的

它可以工作，但速度很慢！我收到一个警报，通知我在2秒内收到了json数据（700行），但更新viewmodel大约需要15秒

我做错了什么

谢谢

    $(document).ready(function () {

        // create the viewmodel we use as the source for the list
        var viewModel = kendo.observable({
            items: [],
            total: function () {
                return this.get("items").length;
            }
        });

        var dataSource2 = new kendo.data.DataSource({
            data: viewModel,
            pageSize: 50
        });

        // create the grid
        $("#grid").kendoGrid({
            dataSource: dataSource2,
            height: 500,
            scrollable: {
                virtual: true
            },
            columns: [
                { field: "ID_ORDER", title: "ID", width: 80 },
                { field: "CREATION_DATE", title: "Creation Date" },
                { field: "STATUS", title: "STATUS", width: 80 },
                ** more columns (around 10) **
            ]
        });

        // pass this on to initialise
        APPS.View.Orders.Initialise(viewModel);

    });

然后，在我的typescript中，我正在处理传入viewModel的初始化调用：

    module APP.View.Orders {

        export var _Scope: string = "Orders";
        var _viewModelOrders: any;

        export var Initialise = function (viewModelOrders: any) {

            _viewModelOrders = viewModelOrders;

            var orderdetails = {
                userid: APP.Core.userID,
                context: "DEAL"
            };

            // retrieve all orders
            $.getJSON("/api/omsapi/GetOrders", orderdetails, function (mydata) {

                try {

                    alert("item count (1): " + mydata.length);

                    jQuery.each(mydata, function () {

                        var newItem = this;
                        _viewModelOrders.items.push(newItem);

                    });

                    alert("item count (2): " + _viewModelOrders.items.length);

                }
                catch (e) {
                    alert(e.message);
                }
            });
        }
}

---

尝试构建项目数组，然后将其分配到模型中

比如：

// retrieve all orders
$.getJSON("/api/omsapi/GetOrders", orderdetails, function (mydata) {
    try {
        alert("item count (1): " + mydata.length);
        var items = [];
        jQuery.each(mydata, function () {
            items.push(this);
        });
        _viewModelOrders.items = items;
        alert("item count (2): " + _viewModelOrders.items.length);
    }
    catch (e) {
        alert(e.message);
    }
});

$.getJSON("/api/omsapi/GetOrders", orderdetails, function (mydata) {
    datasource2.data(mydata);

---

您可以通过执行以下操作暂时挂起可观察对象：

$.getJSON("/api/omsapi/GetOrders", orderdetails, function (mydata) {
     try {
        var simpleArray = viewModel.items();  // get a reference to the underlying array instance of the observable
        jQuery.each(mydata, function () {
            items.push(this);
        });

        viewModel.items.valueHasMutated(); // let the observable know it's underlying data has been updated
     }
     catch (e) {
        alert(e.message);
    }
}

---

使用上述技术可以显著缩短加载时间。我已经在合理的时间内加载了几千行进行了测试。

进一步解释，这是由于行：

_viewModelOrders.items.push(newItem);

每次将项目推入数组时，它都会触发一个

change

事件，网格会看到并自行更新该事件。因此，如果您将700个项目推入，实际上是导致网格将DOM更新700次

最好将所有项聚合到一个数组中，然后将该数组分配给数据源，如下所示：

// retrieve all orders
$.getJSON("/api/omsapi/GetOrders", orderdetails, function (mydata) {
    try {
        alert("item count (1): " + mydata.length);
        var items = [];
        jQuery.each(mydata, function () {
            items.push(this);
        });
        _viewModelOrders.items = items;
        alert("item count (2): " + _viewModelOrders.items.length);
    }
    catch (e) {
        alert(e.message);
    }
});

$.getJSON("/api/omsapi/GetOrders", orderdetails, function (mydata) {
    datasource2.data(mydata);

---

嗨，奥娜-我的下一个剑道参赛作品我将用“奥娜，你能帮我吗？”：）-不幸的是，你的建议这次不起作用-我再次同时创建了一张剑道入场券，所以一旦他们回答，我将张贴它。谢谢。别担心，我会留意你的问题；-）您是否检查了问题是否出在推动viewmodel上的元素或渲染它时？你有我可能“玩”的JSFIDLE吗？为什么人们投票反对？你应该使用数据源的transport:read来获取数据。我觉得用于transport的剑道数据源并不理想。每次您希望从服务器获得某些信息时，都必须定义方案。当我们只想在屏幕上看到一些东西时，Knockout映射插件对于“开发人员”来说效率更高。剑道数据源需要花费太多的时间来配置，所以一切都按预期进行。这只是我对这件事的看法。