What are Controllers For? Demo

components.choose-topic.js

import Ember from 'ember';

export default Ember.Component.extend({
});

controllers.application.js

import Ember from 'ember';

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

controllers.blog-posts.js

import Ember from 'ember';
// in Ember 3.x, you would use import Controller from '@ember/controller';

export default Ember.Controller.extend({
// in Ember 3.x, use export default Controller.extend({
  
  blogPostTopic: '',
  queryParams: [{
    blogPostTopic: {
      type: 'string',
    }
  }], 
  actions: {
    changeQueryParam(topic) {
    	this.set('blogPostTopic', topic)
    }
  }
});

router.js

import Ember from 'ember';
import config from './config/environment';

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

Router.map(function() {
  this.route('blog-posts');
});

export default Router;

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  redirect() {
    this.transitionTo('blog-posts')
  }
});

routes.blog-posts.js

import Ember from 'ember';

export default Ember.Route.extend({
  model(params) {
   console.log('here is the query param available in the model hook: ' + params.blogPostTopic)
  },
  queryParams: {
    blogPostTopic: {
    // refreshModel says whether the model hook on the route should be re-run if the query parameter changes. Its default is false!
      refreshModel: true
    }
  },
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<hr>
{{outlet}}
<br>
<br>

templates.blog-posts.hbs

<p>This is the blog posts template, <i>blog-posts.hbs</i></p>

<p>This template has a corresponding JavaScript file for the Route, <i>app/routes/blog-posts.js</i>, and a Controller with the same name, <i>app/controllers/blog-posts.js</i>. An action to change the query parameters is shared with a child component.</p>

{{choose-topic changeQueryParam=(action "changeQueryParam")}}

templates.components.choose-topic.hbs

<p>Choose a topic below to change the value of the query parameter. You should see the url change in the bar just above (not the Ember Twiddle website URL).</p>
<div>
<button onclick={{action changeQueryParam 'video-games'}}>
   Video Games
</button>
<button onclick={{action changeQueryParam 'ember-articles'}}>
   Ember Articles
</button>
<button onclick={{action changeQueryParam 'opinions'}}>
   Opinions
</button>
<button onclick={{action changeQueryParam 'puppers'}}>
  Puppers
</button>
</div>

twiddle.json

{
  "version": "0.13.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.16.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2"
  },
  "addons": {
    "ember-data": "2.16.3"
  }
}