Query Params Service

controllers.-base\.js

import Controller from '@ember/controller';
import { inject as service } from '@ember/service';

export default class extends Controller {
  @service('query-params') params;

  // queryParams = this.params.buildControllerParams('application', {
  //   composeWith: [this.params.getDatatableParams('controls')]
  // });
}

routes.application\.js

import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default class extends Route {
  @service('query-params') params;
  
  // remove this if you want to use a real controller
  // this just gives us a controller that has the query params service injected
  // onto it.
  controllerName = '-base'; 
  
  dataTableParams = this.params.getDatatableParams('controls');
  queryParams = this.params.buildRouteParams(
    'application',
    { name: 'Chris' }, 
    { composeWith: [this.dataTableParams] }
  );
 
  model() {
    return {
      params: this.params.getParams('application'),
      dt: this.params.getDatatableParams('controls')
    };
  }
}

services.query-params\.js

import { tracked } from '@glimmer/tracking';

class Tag {
  @tracked ref = 0;
}

// this just emulates TrackedObject, same idea
class Params {
  constructor(obj) {
    const tag = new Tag();
    return new Proxy(this, {
      get(target, k) {
        tag.ref;
        return obj[k];
      },
      set(target, k, v) {
        tag.ref = 0;
        obj[k] = v;
        return true;
      }
    });
  }
}

export default class {
  _params = new Map();
  _keys = new Map();
  _keyed = {};
  _keyLookup = new Map();

  getParams(key) {
    return this._params.get(key);
  }

  getDatatableParams(key) {
    // note that `.` and `::` etc. are not valid
    // in keys used for query params, hence prefix with `_`
    const name = `datatable_${key}`;
    if (this._params.has(name)) {
      return this._params.get(name);
    }
    return this.createParams(name, {filter: '', sort: 'asc', limit: 25 });
  }

  createParams(key, obj) {
    const params = new Params(obj);
    this._params.set(key, params);
    this._keys.set(key, Object.keys(obj));
    this._keyed[key] = params;
    this._keyLookup.set(params, key);
    return params;
  }

  _buildRouteParams(name, serviceProp) {
    const keys = this._keys.get(name);
    const config = {};
    keys.forEach(key => {
      config[`${serviceProp}._keyed.${name}.${key}`] = { as: key, refreshModel: true, replace: true };
    });
    return config;
  }

  buildRouteParams(name, obj, options, serviceProp = 'params') {
    this.createParams(name, obj);
    const config = this._buildRouteParams(name, serviceProp);
    options?.composeWith.forEach(params => {
    	Object.assign(config, this._buildRouteParams(this._keyLookup.get(params), serviceProp));
    });
    return config;
  }

//   _buildControllerParams(name, serviceProp) {
//     const keys = this._keys.get(name);
//     const config = keys.map(k => `${serviceProp}._keyed.${name}.${k}`);
 
//     return config;
//   }
//   buildControllerParams(name, options, serviceProp = 'params') {
//     const keys = this._keys.get(name);
//     const config = this._buildControllerParams(name, serviceProp);

//     options?.composeWith.forEach(params => {
//       const k = this._keyLookup.get(params);
//       config.push(...this._buildControllerParams(k, serviceProp));
//     });

//     return config;
//   }
  
  constructor(args) {
    Object.assign(this, args);
  }
  static create(args) {
    return new this(args);
  }
}

templates.application\.hbs

<h1>Welcome</h1>
<br>
<br>
Name: {{@model.params.name}}<br>
Update Name:<Input @value={{@model.params.name}} /><br>
Filter: {{@model.dt.filter}}<br>
Update Filter: <Input @value={{@model.dt.filter}} />
<br>
<br>
<br>
{{outlet}}
<br>
<br>

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}