Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
New Twiddle
import Ember from 'ember';
// this is a bit of a weird construction, but it prevents duplicating the default
// values in the controller and the route. It'd probably be possible to make a helper
// here to make it a bit less weird. Or if default values are always null, this isn't necessary
const ApplicationController = Ember.Controller.extend({
queryParams: ['statusId', 'caseId']
export const defaultQueryParamValues = {
statusId: null,
caseId: null
export default ApplicationController.extend(defaultQueryParamValues);
import Ember from 'ember';
import { defaultQueryParamValues } from "../controllers/application";
// fake storage for the params, really this would be in the session / via ajax
let fakeStoredParams = {
caseId: 'Stored case id'
export default Ember.Route.extend({
queryParams: {
statusId: { refreshModel: true },
caseId: { refreshModel: true }
queryHash(params) {
// would really be this.get('');
let storedParams = fakeStoredParams;
let storedParamsDirty = false;
let hash = Object.keys(defaultQueryParamValues).reduce( (memo, key) => {
if (params[key] != defaultQueryParamValues[key]) {
console.log("The key is in the query params, this takes precedence", key);
memo[key] = params[key];
// set dirty flag if what's in the url doesn't match the stored value
if (storedParams[key] !== params[key]) { storedParamsDirty = true; }
} else if (storedParams[key]) {
console.log("The key is stored in the session, so using that", key);
memo[key] = storedParams[key];
} else {
console.log("The key is not in the params or the session, use the default", key);
memo[key] = defaultQueryParamValues[key];
return memo;
}, {});
if (storedParamsDirty) {
return hash;
updateStoredParams(newStoredParams) {
// trigger ajax request here or store in session or however it's stored
fakeStoredParams = newStoredParams;
// just for testing
this.controller.set('storedParams', fakeStoredParams);
model(params) {
// really would be'case', this.queryHash(params));
return this.queryHash(params);
// just for testing
setupController(controller, context) {
controller.set('model', context);
controller.set('storedParams', fakeStoredParams);
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
dt {
font-weight: bold;
float: left;
width: 100px;
clear: left;
dt:after {
content: ":";
h2 {
clear: both;
margin-top: 100px;
<h1>Query Params</h1>
<p>Use these text fields to update the query params, or update the url above and press enter</p>
<label>caseId {{input value=caseId}}</label>
<label>statusId {{input value=statusId}}</label>
<h2>Resolved query param values</h2>
<p>This is what would be used in the store.query call</p>
{{#each-in model as |key value|}}
<h2>Stored query param values</h2>
<p>This is what would be stored in the session</p>
{{#each-in storedParams as |key value|}}
"version": "0.11.1",
"EmberENV": {
"options": {
"use_pods": false,
"enable-testing": false
"dependencies": {
"jquery": "",
"ember": "2.11.0",
"ember-data": "2.11.0",
"ember-template-compiler": "2.11.0",
"ember-testing": "2.11.0"
"addons": {}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment