zoukankan      html  css  js  c++  java
  • 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({

  • 相关阅读:
    Vmware克隆虚拟机后网卡eth0变eth1解决
    iptables详解
    Python小白的发展之路之Python基础(二)【字符串、列表、集合、文件操作】
    ubuntu下的apt-get内网本地源的搭建
    Python小白的发展之路之Python基础(一)
    qtp录制---点击Activescreen时提示“一个或多个ActiveX控件无法显示”
    qtp录制ie,提示“是否只查看安全传送的网页内容”
    qtp录制ie崩溃
    bug的记录方式
    测试计划和测试方案的区别
  • 原文地址:https://www.cnblogs.com/taoyoung/p/6217271.html
Copyright © 2011-2022 走看看