Binding query parameters to multiple checkboxes

Trying to create checkboxes that add filters to a query parameter when they are checked. There are multiple types of facets but the different types are not known until the search results are received. JS Bin - Collaborative JavaScript Debugging

Ideally the URL would look something like: #/?filters[manufacturer]=Nike&filters[manufacturer]=Puma&filters[category]=Shoes
And if Nike is unchecked on the page, remove it from the url, reload the model with the new parameters.

Some issues I ran into:
-It doesn’t look like ember can support query parameters like filters[object]=something, so I am working around it by creating parameters like: filters=object.something and parsing them in the model
-Ember serializes array parameters as json by default (not really sure why I’d want JSON in a url): javascript - Url encoding for query params in Ember.js - Stack Overflow
-Had to use proxies to get the checked property to bind with the checkbox as described here:

This seems fairly basic but the best solution I could come up with in Ember is pretty messy. Any suggestions on how this could be done cleanly in Ember?

1 Like