New Twiddle

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  queryParams: ['categories', 'serachQuery'],
  
  categories: [],
  serachQuery: '',
  
  actions: {
    addCategory() {
      this.get('categories').pushObject(1);
    }
  },
});

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  queryParams: {
    categories: {
      type: 'array',
      refreshModel: true,
    },
    searchQuery: {
      refreshModel: true,
    }
  },
  
  model(params) {
    console.log('categories', params.categories);

    return new Promise(resolve => setTimeout(resolve, 1000)).then(() => new Date);
  },

  actions: {
    willTransition() {
      console.log('willTransition');
    },

    didTransition() {
      console.log('didTransition');
    },
  },
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
{{model}}
<br>
<button {{action "addCategory"}}>Add category</button> 
<br>
{{input value=searchQuery}}
<br>
<br>

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "ember": "3.22.1",
    "ember-template-compiler": "3.22.1",
    "ember-testing": "3.22.1"
  }
}