New Twiddle

controllers.application\.js

import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class MyController extends Controller {
  appName = 'Ember Twiddle';
	@tracked first = 1;
	@tracked second = 2;
	@tracked third = 3;
	@tracked another = 4;

	@action update() {
    this.first++;
    this.second++;
    this.third++;
  }

	get derived() {
    this.another++;
    return this.first + this.second;
  }
}

routes.application\.js

import MyBaseRoute from 'twiddle/routes/my-base-route';

export default MyBaseRoute.extend({
  queryParams: {
    first: { refreshModel: true },
    second: { refreshModel: true },
  },
  
  beforeModel() {
    console.log('beforeModel');
  },
  
  async model() {
    console.log('model');
  }
});

routes.my-base-route\.js

import Ember from 'ember';

export default Ember.Route.extend({
  mergedProperties: ['queryParams'],
  queryParams: {
    third: { refreshModel: true }
  },
});

templates.application\.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
first: {{first}}
second: {{second}}
third: {{third}}
derived: {{derived}}
another: {{another}}
<br>
<button {{on "click" this.update}}>click me</button>
<br>
<br>

twiddle\.json

{
  "version": "0.16.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.14.3",
    "ember-template-compiler": "3.14.3",
    "ember-testing": "3.14.3"
  },
  "addons": {
    "ember-data": "3.14.1"
  }
}