在客户端下载时,Kendo js需要花费太多时间

时间:2016-10-04 06:40:57

标签: css angularjs user-interface kendo-ui scheduler

我在我的项目中使用了kendo ui scheduler但是在客户端下载kendo js和css需要花费太多时间,因为我们的网站看到了一些缓慢。为了解决这个问题,我们尝试按照请求的方式仅在加载了调度程序日历的页面上下载kendo js和css。虽然集成相同,但我们无法添加依赖项“kendo.directive”。请建议如何添加该依赖项或另一种方法来减少这么多延迟。

请找到相同的代码。

myApp.requires.push('kendo.directives');

myApp.controller('CalenderController',['$scope', '$http', 'StatsService', function ($scope, $http, StatsService) {
    var self=this;

    $scope.schedulerOptions = {
        date: new Date(),
        startTime: new Date(),
        showWorkHours: true,
        height: 600,
        views: [
            "day",
            {type: "week", selected: true},

        ],
        editable: {
            destroy: false,
            create: false,
            template: $("#editor").html()
        },
        timezone: "GMT",
        dataSource: {
            batch: true,
            transport: {
                read: function (options) {
                    url = '/consultants/applications/interviews';
                    $http.get(url).success(function (data, status, headers, config) {
                        options.success(data.result);
                    }).error(function (data, status, headers, config) {
                        options.error(data);
                    });
                },
                parameterMap: function (options, operation) {
                    if (operation !== "read" && options.models) {
                        return {models: kendo.stringify(options.models)};
                    }
                }
            },
            schema: {
                model: {
                    id: "interviewId",
                    fields: {
                        taskId: {from: "id", type: "number", editable: false},
                        candidateName: {from: "candidateName" , editable: false},
                        title: {from: "title", defaultValue: "No title" , editable: false},
                        companyName: {from: "companyName" , editable: false},
                        start: {type: "date", from: "interviewTiming", editable: false},
                        end: {type: "date", from: "interviewEndTiming" , editable: false},
                        candidateEmail: {from: "candidateEmail" , editable: false},
                        candidateMobile: {from: "candidateMobile" , editable: false}
                    }
                }
            }
        }
    };
}]);

1 个答案:

答案 0 :(得分:1)

使用自定义组合脚本,该脚本小于kendo.all.min.js ...

http://docs.telerik.com/kendo-ui/intro/installation/what-you-need#build-scripts

...或使用单个脚本文件:

http://docs.telerik.com/kendo-ui/intro/installation/what-you-need#individual-widget-scripts

在这两种情况下,加载的脚本文件的大小都将减少。

遗憾的是,CSS代码不存在相同的选项。