tarponjargon · February 10, 2017 22:17 · Feb 9, 2017 · Feb 9, 2017 · Feb 9, 2017 · Feb 9, 2017
diff --git a/routes.index.js b/routes.index.js
@@ -1,9 +1,7 @@
 import Ember from 'ember';
 
-var go = '/search?foo[]=1&foo[]=2&foo[]=3';
-
 export default Ember.Route.extend({
   beforeModel() {
-    this.transitionTo(go);
+    this.transitionTo('search');
   }
 });
diff --git a/templates.search.hbs b/templates.search.hbs
@@ -1,4 +1,7 @@
+you have to manually change the url above to:<br>
+/search?foo[]=1&foo[]=2&foo[]=3<br><br>
 
+<b>OUTPUT</b>
 foo array contains: {{foo}}<br><br>
 Click one to remove from array:<br>
 (then note strange QP format change on url - how can ember retain the parameter-array format?)<br><br>

diff --git a/controllers.application.js b/controllers.application.js
@@ -1,6 +1,5 @@
 import Ember from 'ember';
 
 export default Ember.Controller.extend({
-  appName: 'Ember Twiddle',
-  customArray: ['1','2','3']
+  appName: 'Ember Twiddle'
 });
diff --git a/routes.index.js b/routes.index.js
@@ -0,0 +1,9 @@
+import Ember from 'ember';
+
+var go = '/search?foo[]=1&foo[]=2&foo[]=3';
+
+export default Ember.Route.extend({
+  beforeModel() {
+    this.transitionTo(go);
+  }
+});
diff --git a/controllers.application.js b/controllers.application.js
@@ -1,5 +1,6 @@
 import Ember from 'ember';
 
 export default Ember.Controller.extend({
-  appName: 'Ember Twiddle'
+  appName: 'Ember Twiddle',
+  customArray: ['1','2','3']
 });
diff --git a/controllers.search.js b/controllers.search.js
@@ -3,54 +3,15 @@ import Ember from 'ember';
 export default Ember.Controller.extend({
 
 	queryParams: [
-		'q',
-		'paging',
-		'search_page',
-		'search_title',
-		'sort',
-		'search_sort',
-		'category_code',
-		'bct',
-		'filter_breadcrumb',
-		'filter_price',
-		'filter_size_apparel',
-		'filter_size_jewelry',
-		'filter_metal_type',
-		'filter_color',
-		'filter_county'
+		'foo'
 	],
-	q: null,
-	paging: 18,
-	sort: 'best',
-	search_sort: 'relevance',
-	search_title: null,
-	bct: null,
-	category_code: null,
-	search_page: null,
-	filter_breadcrumb: null,
-	filter_price: null,
-	filter_size_apparel: null, 
-	filter_size_jewelry: null, 
-	filter_metal_type: null, 
-	filter_color: null, 
-	filter_county: null,
+	foo: null,
 
 	actions: {
-	  deleteStuff(key) {
-		let urlData = this;
-	    alert("deleteStuff called with " + key);
-	    delete urlData[key];
-	    urlData.notifyPropertyChange();
-	    let newData = {};
-
-	    console.log(urlData);
-	    urlData.queryParams.forEach(function (param) {
-	    	if (Ember.get(urlData, param)) {
-	    		newData[param] = Ember.get(urlData, param);
-	    		console.log(`${param}`);
-	    	}
-	    });
-	    this.transitionToRoute('results', { queryParams: newData });
-	  }
+	  removeItem: function(i) {
+		  alert(`about to remove ${i.toString()}`);
+		  this.foo.removeObject(i.toString());
+		  console.log(this.foo);
+	  },	  
 	}	
 });
diff --git a/routes.search.js b/routes.search.js
@@ -0,0 +1,7 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+	queryParams: {
+		foo: { refreshModel: true }
+	}
+});
diff --git a/templates.index.hbs b/templates.index.hbs
@@ -1 +1,2 @@
-{{link-to 'Click Here' 'search' (query-params q="shirt" search_page="3" filter_breadcrumb="Category > Subcategory")}}
+
+{{link-to 'Click Here' 'search' }}
diff --git a/templates.search.hbs b/templates.search.hbs
@@ -1,9 +1,10 @@
-here are the controller properties (click one of the top 3 to remove from the controller properties)<br>
-I am kind of expecting the QP to reflect the key deletion but it's not happening
-<br>
-{{#each-in this as |key value|}}
-<a href="#" {{action "deleteStuff" key}}>{{key}}: {{value}}</a><br>
-{{/each-in}}
 
-<br><br>
-(side question: in a template, how do you iterate over *just* the controller properties and not the functions?)
+foo array contains: {{foo}}<br><br>
+Click one to remove from array:<br>
+(then note strange QP format change on url - how can ember retain the parameter-array format?)<br><br>
+
+{{#each foo as |f|}}
+delete <a href="#" {{action "removeItem" f}}>{{f}}</a><br>
+{{/each}}
+{{outlet}}
+
diff --git a/templates.search.hbs b/templates.search.hbs
@@ -1,4 +1,9 @@
-here's the data list:<br>
+here are the controller properties (click one of the top 3 to remove from the controller properties)<br>
+I am kind of expecting the QP to reflect the key deletion but it's not happening
+<br>
 {{#each-in this as |key value|}}
 <a href="#" {{action "deleteStuff" key}}>{{key}}: {{value}}</a><br>
-{{/each-in}}
+{{/each-in}}
+
+<br><br>
+(side question: in a template, how do you iterate over *just* the controller properties and not the functions?)
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.search.js b/controllers.search.js
@@ -0,0 +1,56 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+
+	queryParams: [
+		'q',
+		'paging',
+		'search_page',
+		'search_title',
+		'sort',
+		'search_sort',
+		'category_code',
+		'bct',
+		'filter_breadcrumb',
+		'filter_price',
+		'filter_size_apparel',
+		'filter_size_jewelry',
+		'filter_metal_type',
+		'filter_color',
+		'filter_county'
+	],
+	q: null,
+	paging: 18,
+	sort: 'best',
+	search_sort: 'relevance',
+	search_title: null,
+	bct: null,
+	category_code: null,
+	search_page: null,
+	filter_breadcrumb: null,
+	filter_price: null,
+	filter_size_apparel: null, 
+	filter_size_jewelry: null, 
+	filter_metal_type: null, 
+	filter_color: null, 
+	filter_county: null,
+
+	actions: {
+	  deleteStuff(key) {
+		let urlData = this;
+	    alert("deleteStuff called with " + key);
+	    delete urlData[key];
+	    urlData.notifyPropertyChange();
+	    let newData = {};
+
+	    console.log(urlData);
+	    urlData.queryParams.forEach(function (param) {
+	    	if (Ember.get(urlData, param)) {
+	    		newData[param] = Ember.get(urlData, param);
+	    		console.log(`${param}`);
+	    	}
+	    });
+	    this.transitionToRoute('results', { queryParams: newData });
+	  }
+	}	
+});
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('search');
+});
+
+export default Router;
diff --git a/templates.application.hbs b/templates.application.hbs
@@ -0,0 +1,6 @@
+<h1>Welcome to {{appName}}</h1>
+<br>
+<br>
+{{outlet}}
+<br>
+<br>
diff --git a/templates.index.hbs b/templates.index.hbs
@@ -0,0 +1 @@
+{{link-to 'Click Here' 'search' (query-params q="shirt" search_page="3" filter_breadcrumb="Category > Subcategory")}}
diff --git a/templates.search.hbs b/templates.search.hbs
@@ -0,0 +1,4 @@
+here's the data list:<br>
+{{#each-in this as |key value|}}
+<a href="#" {{action "deleteStuff" key}}>{{key}}: {{value}}</a><br>
+{{/each-in}}
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": {}
+}
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		{{link-to 'Click Here' 'search' (query-params q="shirt" search_page="3" filter_breadcrumb="Category > Subcategory")}}

		{{link-to 'Click Here' 'search' }}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{{link-to 'Click Here' 'search' (query-params q="shirt" search_page="3" filter_breadcrumb="Category > Subcategory")}}