javascript - 为 kendo Scheduler 更新/重新分配创建 KO 绑定(bind)处理程序

Question

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

在调度程序中我使用 Horizontal Grouping以及。因此，在这里我使用了 DataSource 以及带有组的资源。

我已经声明了我的变量，如下所示:

monitorData = ko.observableArray(),

schedulerData = ko.observableArray(),

我的激活方法:

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

在完成我的服务调用之前，将返回激活方法。这里 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");
            }
        };

但问题是上面的代码也不起作用。请帮助我解决上述问题。

其他信息:我还需要每天更改调度程序的数据源和资源。日期将通过剑道日历选择。我需要每天明智地选择调用该服务。因此，需要将新数据源分配给 Kendo Scheduler。

如何动态分配剑道调度程序数据源和资源。如果我分配给可观察数组，它不起作用/没有像我上面所说的那样被分配。

如何为 kendoScheduler 更新/初始化编写 ko.bindingHandlers ？

Answer 1

无需编写Ko BindHandlers。

我刚刚从 getschedulerData() 方法分配了我的数据源。另外，当我第一次加载时，调用是async: false。现在我调用了sync电话。因此，除非调用完成，否则activate 方法将不会返回。

以下是我用来替换数据源的代码:

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

但我不知道为什么，也不知道为什么可观察数组不起作用:(

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