kendo method：destroy 解决有些在kendo.all.js 的js 库里报错问题

首先，不得不承认，kendo UI 是个不错的东西，特别对于一个前端开发到行不足的程序猿来说。而在我们使用过程中貌似还是会遇到各种奇怪的问题。比如我们会经常用到对一些控件进行重赋值。

destroy

在kendo的configration 的Medhod 的描述是：

Prepares the widget for safe removal from DOM. Detaches all event handlers and removes jQuery.data attributes to avoid memory leaks. Calls destroy method of any child Kendo widgets.

其主要用来对之前的初始化信息进行销毁。防止再次初始化时报错。

当然如果我们仅仅是简单的使用其显示数据的话，一般是不会出现什么问题的。但是当我们如果想运用其更为复杂的一些功能接口时。要求就比较严谨点。

我们要注意的是kendo 的控件一般是不允许对其多次初始化。比如：在项目中，我们可能用到它的grid 或者 scheduler。而且里面会有一些功能接口。如：

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/scheduler/events">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.material.mobile.min.css" />

    <script src="//kendo.cdn.telerik.com/2016.3.1118/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.3.1118/js/kendo.timezones.min.js"></script>
    <link rel="stylesheet" href="../content/shared/styles/examples-offline.css">
    <script src="../content/shared/js/console.js"></script>
</head>
<body>
<div id="example">
    <div id="scheduler"></div>
    <div class="box wide">
        <h4>Console log</h4>
        <div class="console"></div>
    </div>
</div>
<script>
$(function() {
    function scheduler_dataBinding(e) {
        kendoConsole.log("dataBinding");
    }

    function scheduler_dataBound(e) {
        kendoConsole.log("dataBound");
    }

    function scheduler_save(e) {
        kendoConsole.log("save");
    }

    function scheduler_remove(e) {
        kendoConsole.log("remove");
    }

    function scheduler_cancel(e) {
        kendoConsole.log("cancel");
    }

    function scheduler_change(e) {
        var start = e.start; //selection start date
        var end = e.end; //selection end date
        var slots = e.slots; //list of selected slots
        var events = e.events; //list of selected Scheduler events

        var message = "change:: selection from {0:g} till {1:g}";

        if (events.length) {
            message += ". The selected event is '" + events[events.length - 1].title + "'";
        }

        kendoConsole.log(kendo.format(message, start, end));
    }

    function scheduler_edit(e) {
        kendoConsole.log("edit");
    }

    function scheduler_add(e) {
        kendoConsole.log("add");
    }

    function scheduler_moveStart(e) {
        kendoConsole.log("moveStart");
    }

    function scheduler_move(e) {
        kendoConsole.log("move");
    }

    function scheduler_moveEnd(e) {
        kendoConsole.log("moveEnd");
    }

    function scheduler_resizeStart(e) {
        kendoConsole.log("resizeStart");
    }

    function scheduler_resize(e) {
        kendoConsole.log("resize");
    }

    function scheduler_resizeEnd(e) {
        kendoConsole.log("resizeEnd");
    }

    function scheduler_navigate(e) {
        kendoConsole.log(kendo.format("navigate:: action:{0}; view:{1}; date:{2:d};", e.action, e.view, e.date));
    }

    $("#scheduler").kendoScheduler({
        date: new Date("2013/6/13"),
        startTime: new Date("2013/6/13 7:00"),
        height: 400,
        timezone: "Etc/UTC",
        views: [
            "day",
            { type: "week", selected: true },
            "month",
            "agenda",
            "timeline"
        ],
        selectable: true,
        dataBinding: scheduler_dataBinding,
        dataBound: scheduler_dataBound,
        save: scheduler_save,
        remove: scheduler_remove,
        edit: scheduler_edit,
        add: scheduler_add,
        cancel: scheduler_cancel,
        change: scheduler_change,
        moveStart: scheduler_moveStart,
        move: scheduler_move,
        moveEnd: scheduler_moveEnd,
        resizeStart: scheduler_resizeStart,
        resize: scheduler_resize,
        resizeEnd: scheduler_resizeEnd,
        navigate: scheduler_navigate,
        dataSource: {
            batch: true,
            transport: {
                read: {
                    url: "//demos.telerik.com/kendo-ui/service/tasks",
                    dataType: "jsonp"
                },
                update: {
                    url: "//demos.telerik.com/kendo-ui/service/tasks/update",
                    dataType: "jsonp"
                },
                create: {
                    url: "//demos.telerik.com/kendo-ui/service/tasks/create",
                    dataType: "jsonp"
                },
                destroy: {
                    url: "//demos.telerik.com/kendo-ui/service/tasks/destroy",
                    dataType: "jsonp"
                },
                parameterMap: function(options, operation) {
                    if (operation !== "read" && options.models) {
                        return {models: kendo.stringify(options.models)};
                    }
                }
            },
            schema: {
                model: {
                    id: "taskID",
                    fields: {
                        taskID: { from: "TaskID", type: "number" },
                        title: { from: "Title", defaultValue: "No title", validation: { required: true } },
                        start: { type: "date", from: "Start" },
                        end: { type: "date", from: "End" },
                        startTimezone: { from: "StartTimezone" },
                        endTimezone: { from: "EndTimezone" },
                        description: { from: "Description" },
                        recurrenceId: { from: "RecurrenceID" },
                        recurrenceRule: { from: "RecurrenceRule" },
                        recurrenceException: { from: "RecurrenceException" },
                        ownerId: { from: "OwnerID", defaultValue: 1 },
                        isAllDay: { type: "boolean", from: "IsAllDay" }
                    }
                }
            }
        }
    });
});
</script>

</body>
</html>

如：上面code中的 scheduler_change(）方法，我们在运用在会经常用它来实现切换日期时对scheduler的值进行重新初始化。但是如果我们直接对$("#scheduler").kendoScheduler({}）进行调用时，可能会出现有些功能接口在kendo.all.js 里报错。

但如果我们在重新初始化前能调用一下destroy 方法。则可以避免这些问题。

var scheduler = $("#scheduler").data("kendoScheduler");
scheduler.destroy();

对之前的初始化进行销毁。

$("#scheduler").kendoScheduler({