Kendo UI 데이터 소스가 자바 스크립트 객체를 사용하여 설정됩니다.

Question

검도 UI를 실험하기 시작한 후 표준 자바 스크립트 객체를 사용하여 데이터 소스로 사용할 수있는 방법에 착수했습니다.

처음에는 자바 스크립트 개체에서 데이터를로드하기는 쉽지만 사용자 상호 작용을 통해 변경 한 후에 데이터를 다시 가져오고 싶습니다.

이 객체가 어떻게 든 위젯과 동기화되면 모든 사람이이 자바 스크립트 객체를 읽고 쓸 수 있어야합니다.

우리의 데이터 :

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 
} ]; 

초기화 위젯 :

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

: 여기

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 디버그 주)입니다

검도 UI 세계에서 '상태'를 읽거나 쓰려면 어떻게해야합니까?

Answer 1

간단한 배열이 변화 추적을 제공 할 수 없습니다 그것 때문에 위젯을 만들 때 DataSource으로 변환됩니다. 당신은 다양한 방법으로 데이터의 현재 상태에 액세스 할 수 있습니다 dataSource.data()

에 액세스하십시오 specific item : datasource.view()

pure JS array을 다시 얻을 : dataSource.at(1)

filtered data 얻을

1. 가 배열 all data 이상하는 것은 반복 할 수 : dataSource.data().toJSON()

Answer 2

JavaScript 배열 (_data)에서 dataSource을 초기화하더라도 KendoUI는 초기 내용을로드하는 데만 배열을 사용하는 DataSource (내부적으로 SchedulerDataSource)를 내부적으로 만듭니다.

어레이를 계속 사용하고 변경 사항을 반영하고 싶다면 업데이트를위한 코드를 작성해야 할 것입니다.

당신이 ShedulerDataSource로 정의 _data 살 수 있다면, 당신은 그것을 정의하는 시도 할 수 있습니다 :

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/