New Twiddle

controllers.application.js

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

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  myvar: '',
  
});

controllers.one.js

import Ember from 'ember';
import {inject as controller} from '@ember/controller';
import {alias } from '@ember/object/computed';

export default Ember.Controller.extend({
  
  application: controller(),
  
  queryParams: ['myvar'],
  myvar: ''
  
  
});

controllers.two.js

import Ember from 'ember';
import {inject as controller} from '@ember/controller';
import {alias } from '@ember/object/computed';

export default Ember.Controller.extend({
  
  application: controller(),
  
  queryParams: ['myvar'],
  myvar: ''
  
  
});

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('one');
  this.route('two');

});

export default Router;

routes.one.js

import Ember from 'ember';

export default Ember.Route.extend({
  
  userService: Ember.inject.service(),
  
  firstTime: true,
  
  queryParams: {
    myvar: { refreshModel: true },
  },

  model({ search }) {
    if (this.get('firstTime')) {
      this.set('firstTime', false);
      let myvar = this.get('userSettings.myvar');
    }
  	// model logic here
  },
  
  setupController(controller) {
    if (this.get('userSettings.myvar') && !controller.get('myvar')) {
      controller.set('myvar', this.get('userSettings.myvar'));
    }
  },
  
  resetController(controller) {
     this.get('userSettings').set('myvar', controller.get('myvar'));
     this.set('firstTime', true);
  }

  
  
});

routes.two.js

import Ember from 'ember';

export default Ember.Route.extend({
  
  userService: Ember.inject.service(),
  
  firstTime: true,
  
  queryParams: {
    myvar: { refreshModel: true },
  },

  model({ search }) {
    if (this.get('firstTime')) {
      this.set('firstTime', false);
      let myvar = this.get('userSettings.myvar');
    }
  	// model logic here
  },
  
  setupController(controller) {
    if (this.get('userSettings.myvar') && !controller.get('myvar')) {
      controller.set('myvar', this.get('userSettings.myvar'));
    }
  },
  
  resetController(controller) {
     this.get('userSettings').set('myvar', controller.get('myvar'));
     this.set('firstTime', true);
  }

  
  
});

services.user-service.js

import Ember from 'ember';

export default Ember.Service.extend({
  
  myvar: 'startval'

});

templates.application.hbs

<h1>share query params over routes</h1>

<em>Two routes (one/two) that each have a myvar query-param, that are alias on the parent application-route</em>

{{#link-to 'one'}}one{{/link-to}} | {{#link-to 'two'}}two{{/link-to}}
<br><br>

 
{{outlet}} 
<br>
<br>

<ol>
	<li>Go to "{{#link-to 'one'}}one{{/link-to}}"</li>
  <li>enter any value in the textfield</li>
  <li>Go to "{{#link-to 'two'}}two{{/link-to}}"</li>
  <li>!!! value in textfield should remain !!! -> new value initiated and overriden</li>
  <li>enter any value in the textfield and back to "{{#link-to 'one'}}one{{/link-to}}"</li>
  <li>once sub-controllers are initiated, switching and syncing works</li>
</ol>

templates.one.hbs

ONE: {{input value=myvar}}

templates.two.hbs

TWO: {{input value=myvar}}

twiddle.json

{
  "version": "0.15.0",
  "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.2.2",
    "ember-template-compiler": "3.2.2",
    "ember-testing": "3.2.2"
  },
  "addons": {
    "ember-data": "3.2.0"
  }
}