Question

刚刚开始尝试使用Kendo UI，我不知道如何使用标准的javascript对象作为数据源。

最初从javascript对象加载数据很容易，但我希望能够在用户交互发生更改后恢复数据。

最好，如果此对象以某种方式与窗口小部件同步，那么所有人必须做的是读取/写入此JavaScript对象。

我们的数据：

var _data = [
{
    eventID: 8,
    title: "Group meeting.",
    start: new Date("2013/06/13 07:00"),
    end: new Date("2013/06/13 08:30"),
    pending:false,
    recurrenceRule: "",
    recurrenceException: "",
    description: "Take my brother to his group meeting.",
    isAllDay:false,
    ownTimeSlot:true,
    careAssistantId: 5,
    clientId: 6
},{
    eventID: 9,
    title: "Make dinner.",
    start: new Date("2013/06/13 11:00"),
    end: new Date("2013/06/13 13:30"),
    pending:true,
    recurrenceRule: "",
    recurrenceException: "",
    description: "Make dinner for my mom.",
    isAllDay:false,
    ownTimeSlot:true,
    careAssistantId: 5,
    clientId: 6
} ];

初始小部件：

function save(){
   console.log(_data);    
}

$('.schedule').kendoScheduler({
        date: new Date("2013/6/13"),
        startTime: new Date("2013/6/13 07:00 AM"),
        height: 600,
        views: [ { type: "week", selected: true }],
        save: save,
        dataSource:_data
});

以下是要测试的代码设置（请注意保存时的console.log调试）：

http://jsfiddle.net/t23Ce/11/

如何在Kendo UI世界中读/写'状态'？

Answer 1

简单数组无法提供更改跟踪，因此在您创建窗口小部件时会将其转换为DataSource。您可以通过各种方式访问数据的当前状态：

获取一个数组来迭代all data：dataSource.data()
访问specific item：dataSource.at(1)
获取filtered data：datasource.view()
获得pure JS array返回：dataSource.data().toJSON()

Answer 2

尽管您从JavaScript数组（dataSource）初始化_data，但KendoUI在内部创建了一个DataSource（在您的情况下为SchedulerDataSource），仅使用您的数组加载初始内容

如果您需要/想继续使用数组并反映其中的更改，您可能需要编写一些代码来更新它。

如果您可以将_data定义为ShedulerDataSource，那么您可以尝试将其定义为：

var _data = new kendo.data.SchedulerDataSource({
    data: [    {
        eventID: 8,
        title: "Group meeting.",
        start: new Date("2013/06/13 07:00"),
        end: new Date("2013/06/13 08:30"),
        pending:false,
        recurrenceRule: "",
        recurrenceException: "",
        description: "Take my brother to his group meeting.",
        isAllDay:false,
        ownTimeSlot:true,
        careAssistantId: 5,
        clientId: 6
    },{
        eventID: 9,
        title: "Make dinner.",
        start: new Date("2013/06/13 11:00"),
        end: new Date("2013/06/13 13:30"),
        pending:true,
        recurrenceRule: "",
        recurrenceException: "",
        description: "Make dinner for my mom.",
        isAllDay:false,
        ownTimeSlot:true,
        careAssistantId: 5,
        clientId: 6
    } ],
    schema: {
        model : {
            id : "eventID"
        }
    }
});

看到它在这里运行：http://jsfiddle.net/OnaBai/t23Ce/14/

使用javascript对象设置Kendo UI dataSource

2 个答案: