Using query-params at routes

components.my-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    triggerUrlUpdate() {
      this.get('triggerUrlUpdate')();
    }
  }
});

controllers.application.js

import Ember from 'ember';

var object = Ember.Object.create({
  isQueryParams: true,
  values: {foo1: 'eq.id.value=3;eq.odemeSurecTuru.value=a'}
});

export default Ember.Controller.extend({
  myparams: object,
  routeParams: {
    'eq.id.value': 3
  }
});

controllers.primitive-object-example.js

import Ember from 'ember';

export default Ember.Controller.extend({
    queryParams:{
    direction:{},
    count:{
    	refreshModel:true
    },
    currentDate: {}
  },
  actions:{
    incrementCount:function(){
     this.incrementProperty('count'); 
    }
  }
});

helpers.my-helper.js

import Ember from 'ember';

export function myHelper(params, hash) {
  console.log(params);
  console.log(hash);
  return params;
}

export default Ember.Helper.helper(myHelper);

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('foo-route');
  this.route('primitive-object-example');
  this.route('array-example');
  this.route('javascript-object-example');
  this.route('dynamic-segments-and-query-params-example', {path:'/dsqpe/:id1/:id2'});
});

export default Router;

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  model(){
    return {
      sampleDate:new Date(),
      sampleArr:[{x:2,y:3},{x:4,y:6},{x:6,y:12}],
      sampleObj:{x:2,y:3}
    }
  }
});

routes.array-example.js

import Ember from 'ember';

export default Ember.Route.extend({
  queryParams:{
   arr:{
     type:'array'
   	}
  }
});

routes.dynamic-segments-and-query-params-example.js

import Ember from 'ember';

export default Ember.Route.extend({
  queryParams:{
    direction:{},
    count:{},
    currentDate: {}
  },
  model(params, transition){
    return {
      direction:params.direction,
      id1:params.id1,
      id2:params.id2
    }
  }
});

routes.foo-route.js

import Ember from 'ember';

export default Ember.Route.extend({
  queryParams: {
    foo1: {
      //refreshModel: true,
      //scope: 'controller'
    }
  },
  
  model(params) {
    console.log('@model' + this.controllerFor(this.get('routeName')).get('foo1'));
    

    Ember.run.scheduleOnce('routerTransitions', this, ()=>this.controllerFor(this.get('routeName')).set('foo1', undefined));
    return params.foo1 + "-" + Math.random();
  },
  actions: {
    triggerUrlUpdate() {
      this.controllerFor(this.get('routeName')).set('foo1', Math.random());
      this.refresh();
    }
  }
});

routes.javascript-object-example.js

import Ember from 'ember';

export default Ember.Route.extend({
  queryParams:{
    complex:{}
  }
});

routes.primitive-object-example.js

import Ember from 'ember';

export default Ember.Route.extend({
    queryParams:{
    count:{
    	refreshModel:true
    },
  },
  model(){
   console.log('model called'); 
  }
});

templates.application.hbs

{{#link-to 'primitive-object-example' (query-params direction='asc' count=546 currentDate=model.sampleDate)}}Query Params with Primitive Object Example{{/link-to}} 
<br>

{{#link-to 'array-example' (query-params arr=model.sampleArr)}}Query Params with Array Example{{/link-to}}
<br>

{{#link-to 'javascript-object-example' (query-params complex=model.sampleObj)}}Query Params with Javascript Object Example{{/link-to}}
<br>

{{#link-to 'dynamic-segments-and-query-params-example' 54 38 (query-params direction='asc')}}Dynamic Segments And Query Params Example{{/link-to}}

<br>

{{#link-to 'foo-route' myparams}}Foo Route Example{{/link-to}}
<br>
<br>
<hr>
<br>
{{outlet}}
{{#with (query-params direction="asc") as |x|}}
	{{x.values.direction}}
  {{my-helper routeParams}}
{{/with}}

templates.array-example.hbs

<h3> Array Passing via query-params </h3>

arr:
{{#each arr as |item|}}
	{{item.x}}-{{item.y}}, 
{{/each}}

templates.components.my-component.hbs

{{yield}}
<button onclick={{action 'triggerUrlUpdate'}}>triggerUrlUpdate -- {{model}}</button>

templates.dynamic-segments-and-query-params-example.hbs

<h3> Dynamic Segments And Query Params Example</h3>


direction: {{direction}}
<br>
direction retrieved from model hook: {{model.direction}}
<br>
dynamic segments: {{model.id1}} - {{model.id2}}

templates.foo-route.hbs

This is foo route

{{my-component model=model triggerUrlUpdate=(route-action 'triggerUrlUpdate')}}

templates.javascript-object-example.hbs

<h3> Javascript Object Passing via query-params </h3>

complex:{x:{{complex.x}}, y:{{complex.y}} }

<br>
<br>

<b style="color:red;">See it's failing!</b>

templates.primitive-object-example.hbs

<h3> Primitive Object Passing via query-params </h3>

direction: {{direction}}
<br>
count: {{count}} 
<br>
currentDate: {{currentDate}}

<button {{action 'incrementCount'}}>Increment Count</button>  

twiddle.json

{
  "version": "0.10.7",
  "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.10.0",
    "ember-data": "2.10.0",
    "ember-template-compiler": "2.10.0",
    "ember-testing": "2.10.0"
  },
  "addons": {
  	"ember-route-action-helper": "2.0.0"
  }
}