Demonstrate nested routes with model-refreshing query params

controllers.application.js

import Controller from '@ember/controller';

export default Controller.extend({
  appName: 'Ember Twiddle',
  
  queryParams: [
    // The query param `user-id` will update the computed property `userId`.
    { 'user-id': 'userId' }
  ],
  
  // Default value if query param is empty.
  userId: '',
  
  actions: {
  	changeUser(userId) {
    	// Updating the query-param `user-id`, which will automatically propogate the change of `userId` and refresh the model.
      this.set('user-id', userId);
    }
  }
});

controllers.memberships.js

import Controller, { inject as controller } from '@ember/controller';
import { readOnly } from '@ember/object/computed';

export default Controller.extend({
  // Inject a controller - must be a parent. Cannot be a sibling or child.
  application: controller(),
  
  // Demonstrate a computed property that reads the value from the application controller.
  applicationCallCount: readOnly('application.model.count')
});

router.js

import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('memberships');
});

export default Router;

routes.application.js

import Route from '@ember/routing/route';

export default Route.extend({
  // Query param configuration - here, changing user-id will refresh the model
  queryParams: {
  	'user-id': {
    	refreshModel: true
    }
  },
  
  count: 0,
  
  model(params) {
    // To demonstrate that the mode has refreshed, update and pass the a count to the controller
    this.incrementProperty('count');
    
  	return {
    	...params,
      count: this.count
    }
  }
});

routes.index.js

import Route from '@ember/routing/route';

export default Route.extend({
  // Query param configuration - here, changing user-id will refresh the model
  queryParams: {
  	'user-id': {
    	refreshModel: true
    }
  },
  
  beforeModel() {
    console.log('beforeModel triggered');
  },
  
  model() {
  	return {
    	indexRandom: Math.random() * 100
    }
  }
});

routes.memberships.js

import Route from '@ember/routing/route';

export default Route.extend({
  // Query param configuration - here, changing user-id will refresh the model
  queryParams: {
  	'user-id': {
    	refreshModel: true
    }
  },
  
  model() {
  	return {
    	membershipsRandom: Math.random() * 100
    }
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>

<nav>
	{{#link-to 'index'}}Index{{/link-to}} | 
  {{#link-to 'memberships'}}Memberships{{/link-to}}
</nav>

<br>

{{!--
Using readonly helper basically disables the two-way bind.
We do this to follow DDAU (Data-Down, Actions Up) paradigm.

User input will trigger the action, which reads and passes the value up to the `changeUser` action on the controller.
--}}
{{input value=(readonly userId) input=(action "changeUser" value="target.value")}}

<br>
<br>

Application refresh call count: {{model.count}}

<br>
<br>

<div>
	{{outlet}}
</div>

templates.index.hbs

Index Random Number: {{model.indexRandom}}

templates.memberships.hbs

Memberships Random Number: {{model.membershipsRandom}}
<br>
Application Controller Call Count: {{applicationCallCount}}

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}