Help with migrating this repo to use new CanJS #71
Description
Hello!
It would be greatly helpful to me migrating this repo if someone could show me an example or two.
For example, let's take the two .js files in static/js/upcoming-events:
https://github.com/donejs/bit-docs-donejs-theme/tree/master/static/js/upcoming-events
Would someone be willing to show what these files should look like if they were made with the newest version of CanJS? I should be able to apply the similar changes to most other files in this project on my own once I see how to do it for these two files.
event.js:
/* global moment */
import can from 'can/';
// import moment from 'moment'; // added global
import 'can/model/';
import 'can/map/define/';
import 'can/list/promise/';
export const Event = can.Model.extend({
findAll: 'GET https://www.googleapis.com/calendar/v3/calendars/{calendarId}/events?key={apiKey}',
parseModels: function(data, xhr) {
return data && data.items;
}
}, {
define: {
startTimestamp: {
get: function() {
var start = this.attr('start');
var startDateTime = start.attr('dateTime') || start.attr('date');
return moment(startDateTime).format('X');
},
serialize: true
}
}
});
export default Event;upcoming-events.js:
import $ from 'jquery';
import can from 'can/';
import Event from './event';
import 'can/construct/super/';
import 'can/control/plugin/';
import 'can/view/stache/';
import 'can/list/promise/';
import 'can/map/define/';
import '../components/upcoming-events/upcoming-events';
import '../components/upcoming-event/upcoming-event';
var template = can.stache('<upcoming-events events="{events}"></upcoming-events>');
var UpcomingEvents = can.Control.extend({
pluginName: 'upcomingEvents',
defaults: {
apiKey: null,
calendarId: null
}
}, {
init: function(el, options) {
this.update(options);
},
update: function(options) {
this._super(options);
var vm = new ViewModel(options);
this.element.html(template(vm));
}
});
export var ViewModel = can.Map.extend({
define: {
events: {
Value: Event.List,
get: function(currentValue) {
currentValue.replace(Event.findAll( this.attr() ));
return currentValue;
}
}
}
});
export default UpcomingEvents;The migration guide has been helpful, but I have many questions after reading through. I have made the few changes that were obvious, but am shooting in the dark since I don't fully understand how the old CanJS works, and how things have changed. For example, how to migrate from using the old import 'can/list/promise/';?
Please show me... Thanks!