Źródło danych dla Kendo jest ustawiane za pomocą obiektu javascript

Question

Po prostu zacząłem eksperymentować z interfejsem użytkownika Kendo i utknąłem na tym, jak można użyć standardowego obiektu javascript do użycia jako źródło danych.

To dość łatwe do początkowego załadowania danych z obiektu javascript, ale chcę mieć możliwość odzyskania danych po wystąpieniu zmian w wyniku interakcji użytkownika.

Najlepiej, jeśli ten obiekt jest w jakiś sposób zsynchronizowany z widżetem, więc wszystko co musisz zrobić, to odczytać/zapisać do tego obiektu javascript.

Nasze dane:

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

Init widget:

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

Oto kod instalacyjny do przetestowania (uwaga console.log debug SAVE):

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

Jak należy czytać/pisać "stan" w świecie Kendo UI?

Answer 1

Prosta tablica nie może zapewnić śledzenie zmian, dzięki czemu jest konwertowany na DataSource podczas tworzenia widżetu. Możesz uzyskać dostęp do aktualnego stanu danych na różne sposoby:

1. dostać tablicą iteracyjne nad all data: dataSource.data()
2. dostęp do specific item: dataSource.at(1)
3. dostać filtered data: datasource.view()
4. uzyskać pure JS array powrotem : dataSource.data().toJSON()

Answer 2

Pomimo zainicjować dataSource z tablicy JavaScript (_data) KendoUI wewnętrznie tworzy DataSource (w Twoim przypadku SchedulerDataSource), które wykorzystuje tylko swoją tablicę do ładowania początkowej zawartości.

Jeśli potrzebujesz/chcesz nadal używać tablicy i odzwierciedlać zmiany w niej, prawdopodobnie będziesz musiał napisać kod do jej aktualizacji.

Jeśli można żyć z _data zdefiniowanej jako ShedulerDataSource, to można spróbować określając ją jako:

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" 
     } 
    } 
}); 

Zobacz pracuje tutaj: http://jsfiddle.net/OnaBai/t23Ce/14/