为kendo Scheduler Update / Re-Assign创建KO绑定处理程序

时间:2014-09-12 15:11:32

标签: javascript jquery kendo-ui kendo-scheduler knockout-kendo

我在我的项目中使用Knockout-kendo.js binding for Kendo Scheduler

在计划程序中,我也使用Horizontal Grouping。所以,我在这里使用了DataSource and well as Resources with group.

我已将我的变量声明如下:

monitorData = ko.observableArray(),

schedulerData = ko.observableArray(),

我的激活方法:

activate = function (args) {
            getMonitorData ();
            getschedulerData (08, 09, 2014);
 },

在完成我的服务调用之前,将返回activate方法。这里的Observable数组应该可行。但实际上它没有将数据分配给我的调度程序。即使可观察数组中有数据。

我的日程安排码:

        <div class="scheduler">
            <div id="scheduler" data-bind="kendoScheduler:
            {                    
                date: new Date(),
                startTime: new Date('2014/6/13 12:15 AM'),
                endTime: new Date('2014/6/13 11:54 PM'),
                height: containerHeight,
                views: [{ type: 'day', selected: true, majorTick: 15 }], //'week', //'month', //'Agenda'
                editable: false,
                useKOTemplates: true,
                eventTemplate: $('#event-template').html(), 
                allDaySlot: false,
                timezone: 'Etc/UTC',
                footer: { command: false },
                dataSource: schedulerData(),
                group: { resources: ['Monitors'] },
                resources: [{ field: 'scheduleId', name: 'Monitors', dataSource: monitorData (), title: 'Monitors' }],
                dataBound: function () { $('.k-floatwrap ul li.k-nav-current').hide(); }
            }">
            </div>
        </div>

如果我在变量初始化时将数据硬编码到变量,它就会变得有效。因此,也没有时间间隔,因此数据被分配给调度程序。

如下所示:

processMonitors = processMonitorMapper(monitors), // Functio without service call - returns hard code data

schedulerData = schedulerDataMapper(rawData), // // Functio without service call - returns hard code data

我开始知道如果在初始化数据初始化之后分配了Kendo调度程序,那么可观察到的数组数据将无法理解。所以我尝试了 ko.toJS 。这对我也没有帮助。

避免这种问题。我已经为调度程序尝试了ko.bindhandlers

代码:

ko.bindingHandlers.kendoScheduler = {
            init: function (element) {
                var sch = $(element).data("kendoScheduler");
                console.log("Scheduler Initiated");
            },
            update: function (element, valueAccessor) {
                var value = ko.utils.unwrapObservable(valueAccessor());
                //var scheduler = $(element).data("kendoScheduler");
                //if (scheduler != null) {
                //if (value.dataSource != null && value.dataSource.length > 0 && value.resources[0] != null && value.resources[0].dataSource.length > 0) {
                //    $(element).kendoScheduler({ dataSource: value.dataSource, resources: value.resources });
                //}

                var dataSource = new kendo.data.SchedulerDataSource({
                    data: value
                });
                $(element).data("kendoScheduler").setDataSource(dataSource)
                //}
                console.log("Scheduler Updated");
            }
        };

但问题是上面的代码也无法正常工作。请帮助我解决上述问题。

其他信息:我还需要更改数据源&amp;调度员的资源,每一天都明智。将通过kendo日历选择日期。我需要每天选择调用服务。因此需要将新数据源分配给Kendo Scheduler.

如何分配剑道调度程序数据源&amp;资源动态。如果我分配给可观察数组,它不工作/没有被分配,如上所述。

如何为kendoScheduler Update / Init编写ko.bindingHandlers?

1 个答案:

答案 0 :(得分:1)

无需撰写 Ko BindHandlers

我刚从getschedulerData()方法分配了我的dataSource。当我第一次加载时,呼叫是async: false。现在我打了电话sync。那就是activate method will not be returned until otherwise the call get finished

以下是我用来替换DataSource的代码:

                var scheduler = $('#scheduler').data('kendoScheduler');
                if (scheduler != null) {
                    var dataSource = new kendo.data.SchedulerDataSource({
                        data: schedulerData()
                    });
                    scheduler.setDataSource(dataSource);
                }

但我不知道为什么,也不确定为什么observable array没有做到这一点:(

参考:Kendo Scheduler - Click Drop Down Menus Check it out - Configuration, Fields, Methods, Events:)