EmberJS Classic extension vs. ES6 classes

controller-classic.js

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

controller-es6.js

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

template.hbs

<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>

Still trying to figure out what's going wrong for you, but a quick note on native class best practices: You can use class field initializers to set default values, it's generally a much better idea:

class {
  selectedCourse = null;
  selectedUsers = [];

  showCourseSelect = false;
  showPlayerSelect = false;
}

This is something that classes/class fields were designed for, since initializers assign values on the creation of every instance. They do use = assignment, but that's actually completely fine until after the init hook is called, because nothing is actually watching values set with @ember/object#set until after then! 😄

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!