Manipulating query params

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  application: Ember.inject.controller(),
  queryParams: ['definedInController'],
  appName:'Ember Twiddle',
  definedInController: 'default'
});
    // http://emberigniter.com/should-we-use-controllers-ember-2.0/
  // http://guides.emberjs.com/v2.1.0/routing/query-params/
  //  http://emberjs.com/blog/2015/06/12/ember-1-13-0-released.htm
  // http://emberjs.com/blog/2015/08/13/ember-2-0-released.html
  // http://emberjs.com/blog/2015/05/10/run-up-to-two-oh.html
  // https://github.com/abuiles/ember-101/blob/29f71ac2a99b5630081f1ddeed1cbdf2f44d57e7/manuscript/using-query-params-to-drive-our-application-state.md#driving-our-application-state-through-the-url
  // http://guides.emberjs.com/v2.1.0/components/passing-properties-to-a-component/#toc_positional-params
  // https://github.com/emberjs/ember.js/blob/v2.1.0/packages/ember-routing/lib/ext/controller.js
  // https://github.com/emberjs/ember.js/blob/v2.1.0/packages/ember-routing/lib/system/query_params.js
// https://github.com/emberjs/ember.js/blob/341a325a13fc685a10399de600586b6fb744e99f/packages/ember-routing/lib/system/route.js#L55-L88
  // https://github.com/emberjs/ember.js/blob/1a2cd166a86219717a0cde1df4dab497d8dda3e3/packages/ember-routing-htmlbars/lib/helpers/query-params.js
  // https://github.com/emberjs/ember.js/blob/867ca6a3719d786e3924f3e6776e276ab45a3e57/packages/ember-routing-views/lib/components/link-to.js#L707
// https://ember-twiddle.com/c245f2478149968e98af
  // https://gist.github.com/ramybenaroya/c245f2478149968e98af
  // http://discuss.emberjs.com/t/one-way-bounded-components-properties-future-proofing-1-x-to-2-0/7300
  // https://github.com/emberjs/ember.js/pull/3182
  // http://guides.emberjs.com/v2.1.0/templates/binding-element-attributes/
 // https://github.com/ember-cli/ember-cli-todos/blob/5215410aa5868fbe97f25f129c76ca697da5bd30/app/components/todos-route/template.hbs

application.template.hbs

<h1>Welcome to {{appName}}</h1>
<br>
current route is: {{application.currentRouteName}}
<br>
{{my-component definedInController=definedInController}}
{{outlet}}
<br>
<br>

my-component.component.js

import Ember from 'ember';


export default Ember.Component.extend({
  byAction: 'off',
  controllerStuff: Ember.computed(function() {
    
    var stuff =[
      'hi',
      this.attrs,
      this.container.lookupFactory('controller:application'),
      this.container.lookupFactory('controller:application').proto(),
      this.container.lookupFactory('controller:application').proto(),


      ]
    console.log(stuff);
   return stuff.join('.......');
  }),
  actions: {
    toggleComponentParam: function(field) {
        if (this.get(field) === 'off') {
          this.set(field, 'on');
        } else {
          this.set(field, 'off');
        }
    },
    useQueryParamsObject: function(field) {
       
     
    
    }
}

});

my-component.template.hbs

<p {{action 'toggleComponentParam' 'byAction'}}>Click Action toggleComponentParam on 'byAction': {{byAction}}</p>
<p>
{{#link-to 'index' (query-params byAction='set')}}
Link with 'byAction' Query Params: {{byAction}}
{{/link-to}}
</p>
<hr>
<p{{action 'toggleComponentParam' 'definedInController'}}>Click Action toggleComponentParam on 'definedInController': {{definedInController}}
</p>
<p>
{{#link-to 'index' (query-params definedInController='set')}}
Link with 'definedInController' Query Params: {{definedInController}}
{{/link-to}}
</p>
<hr>
<p{{action 'toggleComponentParam' 'linkParams'}}>Click Action toggleComponentParam on 'linkParams': {{linkParams}}
</p>
<p>
{{#link-to 'index'  (query-params linkParams='set')}}
Link with 'linkParams' Query Params: {{linkParams}}
{{/link-to}}
</p>
<hr>
controller stuff...
{{controllerStuff}}

{{yield}}

my-route.route.js

import Ember from 'ember';

export default Ember.Route.extend({
   queryParams: {
     definedInController,
     byAction: { replace: true }
   }

});

twiddle.json

{
  "version": "0.4.16",
  "EmberENV": {
    "FEATURES": {}
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "1.13.10",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.1.0/ember-data.js",
    "ember-template-compiler": "1.13.10"
  }
}