tarponjargon
2/11/2017 - 6:23 PM

New Twiddle

New Twiddle

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

<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}}
<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{link-to "Click here (unless you already did)" "results" (query-params q="foo")}}
{{outlet}}
<br>
<br>
import Ember from 'ember';

export default Ember.Route.extend({
      queryParams: {
        q: { refreshModel: true },
        sort_method: { refreshModel: true },
        search_type: { refreshModel: true },
        filter1: { refreshModel: true }, 
        filter2: { refreshModel: true }
      }
});
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;
import Ember from 'ember';

export default Ember.Controller.extend({
	
	queryParams: ['q','sort_method','search_type','filter1','filter2'],
	
	init(){
		this._super(...arguments);
    
	  Ember.set(this, 'q', null);
    Ember.set(this, 'sort_method', 'relevance'); // <-- sets default value to 'undefined'
    Ember.set(this, 'filter1', []); // <-- sets default value to 'undefined'
	},
  
  filter2: [], // <-- sets default value to 'Array[0]'
  search_type: 'bar', // <-- sets default value properly

	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());
	  }	  
	}	
});
import Ember from 'ember';

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