Thought exercise on "Ember Controllerless"

README.md

@model, @action and @service basically expose the underlying thing that they decorate to the component set by @associatedComponent (which is made up and not a great name).

I can also see something like @model({ pauseRendering: false }) and @model({ waitForParent: false }) for the data loading.

user-route.hbs

{{!-- This is the user-route component --}}
<p>{{@data.firstName}}</p>
<p>{{@data.lastName}}</p>

{{!-- can also access @queryParams --}}

<button type='button' onclick={{action @someAction @data.username}}>Trigger someAction</button>

user.js

import Route from '@ember/routing/route';
import { action } from '@ember-decorators/object';
import { model } from '@ember-decorators/model';
// The following is an invented API
import { associatedComponent } from '@ember-decorators/route';

@associatedComponent('user-route')
export Class extends Route {
  @service queryParams
  
  @model
  data() {
    const { sort } = this.queryParams.forRoute(this)
    
    // Anything returned from here would be accessible on the 
    // template via `data` 
    return fetch(`/v1/data?sort=${sort}`).then(res => res.json());
  }
  
  willEnter() {}
  didEnter() {}
  
  willLeave() {}
  didLeave() {}
  
  @action
  someAction() {
    // ...
  }
}