Using ember.object to manage QPs - is this a reasonable approach?

@midget2000x wrote:

Strap yourself in for a mega-newb post!!

Still learning ember. I like it, but I'll admit, I'm struggling. v0.1 of my search-filtering app was spaghetti so I'm trying again from scratch

My search app manages state with query string parameters. Every time the QPs change, the model needs to refresh. The "easy" part is that I am using the same QPs on the front end as what is expected on the back end by my api. So i literally just pass them straight thru and it works.

My spaghetti code app had the URL as the source of truth for state. But now I'm thinking of using an Ember.Object that contains the QPs as properties. This way I can have my actions operate on something "native" to ember and not try to roll my own QP manager. Also, I can set an observer on the object, and when it changes, update the properties and do a transitionTo with the new params (I think?). Plus, the data in the object affects the view, so any changes in it will automatically update there.

Would this be the "ember" way, or am I off-base?

If it's the right approach, is this roughly how it would look? I imagine it would go in the route.

const UrlObj = Ember.Object.extend({
	queryParams: {
		q: null,
		filter_breadcrumb: null,
		filter_price: null,
		filter_size: null,
		search_page: 1,
		paging: 18,
		search_sort: 'relevance'
	},

	watchObj: Ember.observer(
		'queryParams.q',
		'queryParams.filter_breadcrumb',
		'queryParams.filter_price',
		'queryParams.filter_size',
		'queryParams.search_page',
		'queryParams.paging',
		'queryParams.search_sort',
	function() {
		// serialize object for use on URL
		let newUrl = '/search?' + Ember.$.param(this.get('queryParams');
		// specifying QPs each time overrides stickyness
		this.transitionTo(newUrl);
	}),

});
let urlData = UrlObj.create();

Then there would be route actions that handle the actual updating of the ember object:

...
	actions: {
		addOrUpdateParam: function(key, value) {
			urlData.queryParams.set(key, value);
		},
		removeParam: function(key) {
			urlData.queryParams.set(key, null);
		}
	}
...

That's basically pseudo-code, I am pretty sure code like that won't work. But I'm just looking for guidance on whether this is the "ember way" to approach it.

Posts: 4

Participants: 2

Read full topic