tarponjargon · February 19, 2017 21:13 · Feb 19, 2017 · Feb 19, 2017 · Feb 11, 2017
diff --git a/controllers.results.js b/controllers.results.js
@@ -1,25 +1,19 @@
 import Ember from 'ember';
 
-// this would not be here, I'd import it to both the route and the controller (perhaps from environment.js)
-const cfg = {
-    defaultQueryParams: {
-        q: null,
-        sort_method: 'relevance', //<--when added with setProperties in init() - strings are added just fine
-		    filter1: [], // <--when added with setProperties in init() - arrays are added as 'undefined'
-		    filter2: [] 
-    }
-};
-
 export default Ember.Controller.extend({
 
-	queryParams: Object.keys(cfg.defaultQueryParams),  // <--this works just fine, no need to manually specify
+	queryParams: ['q','sort_method','search_type','filter1','filter2'],
 
 	init(){
 		this._super(...arguments);
-		this.setProperties(cfg.defaultQueryParams); // <--works for setting strings, but not arrays
+
+	  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: [], // <--when added directly, arrays are added as 'Array[0]'
+  filter2: [], // <-- sets default value to 'Array[0]'
+  search_type: 'bar', // <-- sets default value properly
 
 	actions: {
 	  addFilter: function(key, value) {

diff --git a/routes.results.js b/routes.results.js
@@ -1,26 +1,11 @@
 import Ember from 'ember';
 
-// this would not be here, I'd import it to both the route and the controller (perhaps from environment.js)
-const cfg = {
-    defaultQueryParams: {
-        q: null,
-        sort_method: 'relevance',
-		    filter1: [],
-      	filter2: []
-    }
-};
-
 export default Ember.Route.extend({
-	queryParams: {},
-	init() {  
-	    this._super(...arguments);
-
-    //specify from cfg.defaultQueryParams rather than each one explicitly
-		Object.keys(cfg.defaultQueryParams).forEach((qp) => {
-			this.queryParams[qp] = { refreshModel: true };
-		});
-
-    // setting each queryParams `refreshModel: true` using a loop does work! yay! See console:
-    console.log("ROUTE queryParams:", this.queryParams);
-	}
+      queryParams: {
+        q: { refreshModel: true },
+        sort_method: { refreshModel: true },
+        search_type: { refreshModel: true },
+        filter1: { refreshModel: true }, 
+        filter2: { refreshModel: true }
+      }
 });
diff --git a/controllers.results.js b/controllers.results.js
@@ -1,38 +1,31 @@
 import Ember from 'ember';
 
-// this would not be here, I'd import it to the route and the controller
+// this would not be here, I'd import it to both the route and the controller (perhaps from environment.js)
 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: [] 
+        sort_method: 'relevance', //<--when added with setProperties in init() - strings are added just fine
+		    filter1: [], // <--when added with setProperties in init() - arrays are added as 'undefined'
+		    filter2: [] 
     }
 };
 
 export default Ember.Controller.extend({
 
-	queryParams: Object.keys(cfg.defaultQueryParams),
+	queryParams: Object.keys(cfg.defaultQueryParams),  // <--this works just fine, no need to manually specify
 
 	init(){
 		this._super(...arguments);
-		this.setProperties(cfg.defaultQueryParams);
+		this.setProperties(cfg.defaultQueryParams); // <--works for setting strings, but not arrays
 	},
+
+  filter2: [], // <--when added directly, arrays are added as 'Array[0]'
 
 	actions: {
 	  addFilter: function(key, value) {
-		  alert(`adding ${key} ${value.toString()}`);
-      console.log(this);
+		  alert(`adding "${value.toString()}" to controller property '${key}'`);
+      console.log("DUMP OF EMBER 'this':", this);
 		  this[key].pushObject(value.toString());
-	  }, 
-	  removeFilter: function(key, value) {
-		  this[key].removeObject(value.toString());
-		  console.log(this[key]);
-	  },	  
+	  }	  
 	}	
 });
diff --git a/helpers.debug-filter.js b/helpers.debug-filter.js
@@ -1,7 +0,0 @@
-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);

diff --git a/routes.results.js b/routes.results.js
@@ -1,17 +1,12 @@
 import Ember from 'ember';
 
-// this would not be here, I'd import it to the route and the controller
+// this would not be here, I'd import it to both the route and the controller (perhaps from environment.js)
 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: [] 
+        sort_method: 'relevance',
+		    filter1: [],
+      	filter2: []
     }
 };
 
@@ -20,45 +15,12 @@ export default Ember.Route.extend({
 	init() {  
 	    this._super(...arguments);
 
-		for (let qp of Object.keys(cfg.defaultQueryParams)) {
+    //specify from cfg.defaultQueryParams rather than each one explicitly
+		Object.keys(cfg.defaultQueryParams).forEach((qp) => {
 			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);
+    // setting each queryParams `refreshModel: true` using a loop does work! yay! See console:
+    console.log("ROUTE queryParams:", this.queryParams);
 	}
-
-});
+});
diff --git a/templates.application.hbs b/templates.application.hbs
@@ -1,7 +1,7 @@
 <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")}}
+{{link-to "Click here (unless you already did)" "results" (query-params q="foo")}}
 {{outlet}}
 <br>
 <br>
diff --git a/templates.results.hbs b/templates.results.hbs
@@ -1,29 +1,14 @@
-<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>
+<h1>Add a filter:</h1>
 <br>
-{{#each aggregations.breadcrumb as |breadcrumbs|}}
-<a href="#" {{action "addFilter" "filter_breadcrumb" breadcrumbs.key}}>{{breadcrumbs.key}} ({{breadcrumbs.doc_count}})</a><br>
-{{/each}}
+<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>
-This runs action "addFilter" and throws an error : "Uncaught TypeError: Cannot read property 'pushObject' of undefined"<br>
-( see image: http://imgur.com/SsUDToJ )<br>
-on this line in controller: this[key].pushObject(value.toString());<br>
-because the empty array assignment in cfg.defaultQueryParams did not get set via setProperties
-
 
+<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}}
diff --git a/controllers.application.js b/controllers.application.js
@@ -0,0 +1,5 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  appName: 'Ember Twiddle'
+});
diff --git a/controllers.results.js b/controllers.results.js
@@ -0,0 +1,38 @@
+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),
+
+	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]);
+	  },	  
+	}	
+});
diff --git a/helpers.debug-filter.js b/helpers.debug-filter.js
@@ -0,0 +1,7 @@
+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);
diff --git a/router.js b/router.js
@@ -0,0 +1,13 @@
+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;
diff --git a/routes.results.js b/routes.results.js
@@ -0,0 +1,64 @@
+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);
+	}
+
+});
diff --git a/templates.application.hbs b/templates.application.hbs
@@ -0,0 +1,7 @@
+<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>
diff --git a/templates.results.hbs b/templates.results.hbs
@@ -0,0 +1,29 @@
+<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>
+This runs action "addFilter" and throws an error : "Uncaught TypeError: Cannot read property 'pushObject' of undefined"<br>
+( see image: http://imgur.com/SsUDToJ )<br>
+on this line in controller: this[key].pushObject(value.toString());<br>
+because the empty array assignment in cfg.defaultQueryParams did not get set via setProperties
+
+
+
+
+{{outlet}}
diff --git a/twiddle.json b/twiddle.json
@@ -0,0 +1,18 @@
+{
+  "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": {}
+}
No results found