New Twiddle

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

controllers.results.js

import Ember from 'ember';

// this would not be here, I'd import it to the route and the controller
const cfg = {
    defaultQueryParams: {
        q: null,
        paging: '18',
        search_sort: 'relevance',
        search_title: null,
        search_page: null,
        filter_breadcrumb: [],
        filter_price: [],
        filter_size_apparel: [], 
        filter_color: [] 
    }
};

export default Ember.Controller.extend({
	
	queryParams: Object.keys(cfg.defaultQueryParams),
	
  // the empty array assignments have to be specified directly in the controller properties(?)
  q: null,
  paging: '18',
  search_sort: 'relevance',
  search_title: null,
  search_page: null,
  filter_breadcrumb: [],
  filter_price: [],
  filter_size_apparel: [], 
  filter_color: [],  
	//init(){
	//	this._super(...arguments);
	//	this.setProperties(cfg.defaultQueryParams);
	//},

	actions: {
	  addFilter: function(key, value) {
		  alert(`adding ${key} ${value.toString()}`);
      console.log(this);
		  this[key].pushObject(value.toString());
	  }, 
	  removeFilter: function(key, value) {
		  this[key].removeObject(value.toString());
		  console.log(this[key]);
	  },	  
	}	
});

helpers.debug-filter.js

import Ember from 'ember';

export function debugFilter([value]) {
  return Ember.typeOf(value) !== 'function' && typeof value !== 'undefined' && value.length > 0;
}

export default Ember.Helper.helper(debugFilter);

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('results');
});

export default Router;

routes.results.js

import Ember from 'ember';

// this would not be here, I'd import it to the route and the controller
const cfg = {
    defaultQueryParams: {
        q: null,
        paging: '18',
        search_sort: 'relevance',
        search_title: null,
        search_page: null,
        filter_breadcrumb: [],
        filter_price: [],
        filter_size_apparel: [], 
        filter_color: [] 
    }
};

export default Ember.Route.extend({
	queryParams: {},
	init() {  
	    this._super(...arguments);

		for (let qp of Object.keys(cfg.defaultQueryParams)) {
			this.queryParams[qp] = { refreshModel: true };
		}
	},

	model(params) {

	    let aggregations = {
		  'aggregations': {
		    'breadcrumb': [
		      {
		        'doc_count': 37, 
		        'key': 'Home'
		      }, 
		      {
		        'doc_count': 15, 
		        'key': 'Home > Kitchen and Bar'
		      }, 
		      {
		        'doc_count': 12, 
		        'key': 'Home > Footballz'
		      }, 
		      {
		        'doc_count': 12, 
		        'key': 'Home > Garbage Cans'
		      }, 
		      {
		        'doc_count': 16, 
		        'key': 'Brand new items'
		      }
		    ]
		  }
		}
	    return aggregations;
    
	},
	    
	setupController(controller, model) {	
		controller.set('aggregations', model.aggregations);
	}

});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{link-to "Click here (unless you already did)" "results" (query-params q="foo" paging="24" search_page="3" search_sort="relevance")}}
{{outlet}}
<br>
<br>

templates.results.hbs

<h1>List of controller properties/query params:</h1>
{{#each-in this as |key value|}}
{{#if (debug-filter value)}}
{{key}}: {{value}}<br>
{{/if}}
{{/each-in}}

<br><br>
<h1>List of selected filters:</h1>
{{#each filter_breadcrumb as |bc|}}
<a href="#" {{action "removeFilter" "filter_breadcrumb" bc}}>{{bc}}</a><br>
{{/each}}

<br><br>
<h1>available filters (click to add to selected filters list above)</h1>
<br>
{{#each aggregations.breadcrumb as |breadcrumbs|}}
<a href="#" {{action "addFilter" "filter_breadcrumb" breadcrumbs.key}}>{{breadcrumbs.key}} ({{breadcrumbs.doc_count}})</a><br>
{{/each}}
<br><br>
When the empty array assignments are made directly in the controller properties, they are recognized in the object as arrays and the
addFilter action (pushObject) works.
<br><br>
See image of console: http://imgur.com/pZBymW3





{{outlet}}

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": {}
}