2

ViewModel を Kendo DataSource にバインドしようとしています。Kendo DataSource は Kendo Grid に渡されます。この時点であまりにも派手なことはありません。

それは一種の動作ですが、非常に遅いです! json データ (700 行) を 2 秒以内に受信したことを通知するアラートが表示されますが、ビューモデルの更新には約 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 が渡される Initialise 呼び出しを処理しています。

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

3 に答える 3

1

item 配列を構築してから、それをモデルに割り当ててみてください。

何かのようなもの：

// 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);
    }
});
于 2013-02-04T22:07:51.760 に答える
1

次のようにして、オブザーバブルを一時的に停止できます。

$.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);
    }
}

上記のテクニックを実行すると、ロード時間が劇的に改善されます。妥当な時間内に数千行をロードすることをテストしました。

于 2013-05-02T15:52:30.383 に答える