Last active
January 14, 2019 02:11
-
-
Save ultimatemonty/fce7d151b5527baa328d3983f9b0536b to your computer and use it in GitHub Desktop.
EmberJS Classic extension vs. ES6 classes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// modals are togglable with this version | |
import Controller from '@ember/controller'; | |
import { inject as service } from '@ember/service'; | |
export default Controller.extend({ | |
store: service(), | |
users: null, | |
courses: null, | |
selectedCourse: null, | |
selectedUsers: null, | |
showCourseSelect: false, | |
showPlayerSelect: false, | |
init() { | |
this._super(...arguments); | |
this._setDefaults(); | |
this._fetchInitialData(); | |
}, | |
_setDefaults() { | |
this.setProperties({ | |
selectedUsers: [] | |
}); | |
} | |
async _fetchInitialData() { | |
this.users = await this.store.findAll('user'); | |
this.courses = await this.store.findAll('course'); | |
}, | |
actions: { | |
toggleCourseSelect() { | |
this.toggleProperty('showCourseSelect'); | |
}, | |
togglePlayerSelect() { | |
this.toggleProperty('showPlayerSelect'); | |
} | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// modals are not togglable with this version | |
import Controller from '@ember/controller'; | |
import { service } from '@ember-decorators/service'; | |
import { action } from '@ember-decorators/object'; | |
export default class NewRoundController extends Controller { | |
@service store; | |
users = null; | |
courses = null; | |
selectedCourse = null; | |
selectedUsers = null; | |
showCourseSelect = null; | |
showPlayerSelect = null; | |
contructor() { | |
super(...arguments); | |
this._setDefaults(); | |
this._fetchInitialData(); | |
} | |
_setDefaults() { | |
this.setProperties({ | |
showCourseSelect: false, | |
showPlayerSelect: false, | |
selectedUsers: [] | |
}); | |
} | |
async _fetchInitialData() { | |
this.users = await this.store.findAll('user'); | |
this.courses = await this.store.findAll('course'); | |
} | |
@action | |
toggleCourseSelect() { | |
this.toggleProperty('showCourseSelect'); | |
} | |
@action | |
togglePlayerSelect() { | |
this.toggleProperty('showPlayerSelect'); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks! I was fiddling around with it and finally got it working. I thought had it setup right initially then saw some odd behavior where I would toggle the modal and nothing would show. Then I would change routes and come back and the modal would be visible when the route loaded. I thought maybe it was something weird with controllers because they are singletons but turns out that's not the case. Either way it's working now and thanks for responding!