Привязка MVVM к Kendo Grid ОЧЕНЬ медленная?

Я пытаюсь связать ViewModel с источником данных Kendo, который, в свою очередь, передается сетке Kendo. На данный момент ничего особенного.

Вроде работает, но ОЧЕНЬ медленно! У меня есть предупреждение, информирующее меня о том, что я получил свои данные 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);

    });

Затем в моем машинописном тексте я обрабатываю вызов Initialise, в котором передается 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);
                }
            });
        }
}

kendo-grid kendo-ui
person Marcel    schedule 04.02.2013    source источник
comment
Почему люди голосуют против этого?   -  person Marcel    schedule 05.02.2013
comment
Вы должны использовать транспорт: чтение DataSource, чтобы получить ваши данные.   -  person Daniel Lorenz    schedule 22.04.2013
comment
Я не думаю, что Kendo DataSource для транспорта идеально подходит. Вы должны определять схему каждый раз, когда ожидаете чего-то от сервера. Плагин Knockout-Mapping намного эффективнее для разработчиков, когда мы просто хотим получить что-то на экране. Для настройки источника данных кендо требуется слишком много времени, чтобы все работало, как ожидалось. Это всего лишь мое собственное мнение по этому вопросу.   -  person Mr. Young    schedule 02.05.2013

Ответы (3)


arrow_upward
1
arrow_downward

Попробуйте создать массив элементов, а затем назначить его модели.

Что-то вроде:

// 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);
    }
});
person OnaBai    schedule 04.02.2013
comment
Привет, Она. Моя следующая запись в кендо, к которой я собираюсь обратиться со словами «Она, ты можешь мне помочь?» :) - К сожалению, ваше предложение на этот раз не работает - я снова одновременно создал тикет и в Кендо, поэтому, как только они ответят, я его опубликую. Спасибо. - person Marcel; 05.02.2013
comment
Не волнуйтесь, я буду следить за вашими вопросами ;-) Вы проверили, возникает ли проблема при добавлении элементов в модель представления или, возможно, при ее рендеринге? У вас есть какой-нибудь JSFiddle, с которым я мог бы поиграть? - person OnaBai; 05.02.2013

arrow_upward
1
arrow_downward

Вы можете временно приостановить наблюдаемое, выполнив следующие действия:

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

Выполнение описанной выше техники значительно сокращает время загрузки. Я тестирую эту загрузку нескольких тысяч строк за разумное время.

person Mr. Young    schedule 02.05.2013

arrow_upward
0
arrow_downward

Чтобы объяснить далее, это связано со строкой:

_viewModelOrders.items.push(newItem);

Каждый раз, когда вы помещаете элемент в массив, он запускает событие change, которое Grid видит и обновляет сам. Таким образом, если вы вставите 700 элементов, вы действительно заставите сетку обновить DOM 700 раз.

Было бы намного лучше объединить все элементы в массив, а затем присвоить массив источнику данных с помощью чего-то вроде:

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