Using query-params at routes

controllers.primitive-object-example.js

import Ember from 'ember';

export default Ember.Controller.extend({
  actions:{
    incrementCount:function(){
     this.incrementProperty('count'); 
    }
  }
});

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('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.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:{
    direction:{},
    count:{
    	refreshModel:true
    },
    currentDate: {}
  },
  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>
<br>
<hr>
<br>
{{outlet}}

templates.array-example.hbs

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

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

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.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"
  }
}