New Twiddle

controllers.application.js

import Ember from 'ember';

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

controllers.results.js

import Ember from 'ember';

//Import defaults from file
//In real project I suggest to replace this with 
//import ENV from 'project-name/config/environment';
//and define default values in environment.js file
let ENV = {
  myDefaults: {
    route: {
      queryParams: {
        q: { refreshModel: true },
        sort_method: { refreshModel: true },
        search_type: { refreshModel: true },
        filter1: { refreshModel: true }, 
        filter2: { refreshModel: true }
      }
    },
    controller: {
      queryParams: ['q','sort_method','search_type','filter1','filter2'],
    	q: null,
    	sort_method: 'relevance',
    	filter1: [],
    	filter2: [],
    	search_type: 'bar'
    }
  }
};

export default Ember.Controller.extend(Ember.$.extend({}, ENV.myDefaults.controller, {
	actions: {
	  addFilter: function(key, value) {
		  alert(`adding "${value.toString()}" to controller property '${key}'`);
      console.log("DUMP OF EMBER 'this':", this);
		  this[key].pushObject(value.toString());
	  }	  
	}	
}));

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';

//Import defaults from file
//In real project I suggest to replace this with 
//import ENV from 'project-name/config/environment';
//and define default values in environment.js file
let ENV = {
  myDefaults: {
    route: {
      queryParams: {
        q: { refreshModel: true },
        sort_method: { refreshModel: true },
        search_type: { refreshModel: true },
        filter1: { refreshModel: true }, 
        filter2: { refreshModel: true }
      }
    },
    controller: {
      queryParams: ['q','sort_method','search_type','filter1','filter2'],
    	q: null,
    	sort_method: 'relevance',
    	filter1: [],
    	filter2: [],
    	search_type: 'bar'
    }
  }
};

export default Ember.Route.extend(Ember.$.extend({}, ENV.myDefaults.route, {
}));

templates.application.hbs

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

templates.results.hbs

<h1>Add a filter:</h1>
<br>
<a href="#" {{action "addFilter" "filter1" "Value of Filter 1"}}>Click to add a filter to filter1 array set in controller init()</a> (then see error in console and "DUMP OF EMBER 'this'" in console - note difference between default values of filter1 and filter2 arrays)
<br><br>
<a href="#" {{action "addFilter" "filter2" "Value of Filter 2"}}>Click to add a filter to filter2 array set right on the controller</a> (should work)
<br><br>

<h1>Selected filters (should be the result of clicking a link above):</h1>
Filter1: {{#each filter1 as |bar|}}{{bar}}{{/each}}<br>
Filter2: {{#each filter2 as |baz|}}{{baz}}{{/each}}<br>


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