QP array wat

controllers.application.js

import Ember from 'ember';

const {
  Controller,
  copy,
  isArray
} = Ember;

export default Controller.extend({
  queryParams: [
    'foo',
    'bar'
  ],

  foo: null,
  bar: [],
  
  items: [
    'baz',
    'qux',
    'corge'
  ],
  
  actions: {
    
    toggleItem(item) {
      let {
        foo,
        bar
      } = this.getProperties('foo', 'bar');
      
      // foo instantiates as null
       if (!isArray(foo)) {
         foo = [];
      }
      
      let newFoo = copy(foo);
      let newBar = copy(bar);
      
      if (foo.includes(item)) {
        newFoo.removeObject(item);
      } else {
        newFoo.addObject(item);
      }
      
      if (bar.includes(item)) {
        newBar.removeObject(item);
      } else {
        newBar.addObject(item);
      }
      
      this.setProperties({
        foo: newFoo,
        bar: newBar
      });
    }
  }
});

routes.application.js

import Ember from 'ember';

const {
  Route
} = Ember;

export default Route.extend({
});

templates.application.hbs

<h2>Wat: Query Params Edition</h2>

{{! TODO: buttons to add/remove items from QP array(s) }}

{{#each items as |item|}}
  <button onclick={{action "toggleItem" item}}>{{item}}</button>
{{/each}}

twiddle.json

{
  "version": "0.11.0",
  "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.2",
    "ember-data": "2.11.0",
    "ember-template-compiler": "2.10.2",
    "ember-testing": "2.10.2"
  },
  "addons": {}
}