Skip to content

Instantly share code, notes, and snippets.

@ultimatemonty
Last active January 14, 2019 02:11
Show Gist options
  • Save ultimatemonty/fce7d151b5527baa328d3983f9b0536b to your computer and use it in GitHub Desktop.
Save ultimatemonty/fce7d151b5527baa328d3983f9b0536b to your computer and use it in GitHub Desktop.
EmberJS Classic extension vs. ES6 classes
// 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');
}
}
});
// 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');
}
}
<div id="new-round" class="px-4 py-2" data-tether-id="select-course">
<h2>Start a New Round</h2>
<div class="flex">
<form class="w-full max-w-sm">
<div
class="flex items-center border-b border-b-2 border-grey py-2 text-grey-darker text-2xl mt-12 pointer-events-auto"
onclick={{action "toggleCourseSelect"}}>
<div>
Where are you playing?
</div>
</div>
<div
class="flex items-center border-b border-b-2 border-grey py-2 text-grey-darker text-2xl mt-12 pointer-events-auto"
onclick={{action "togglePlayerSelect"}}>
<div>
Who are you playing with?
</div>
</div>
</form>
</div>
{{#if showCourseSelect}}
// show modal with availble courses
{{/if}}
{{#if showUserSelect}}
// show modal with availble users
{{/if}}
</div>
@ultimatemonty
Copy link
Author

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment