[SOLVED] Using ember-cli-selectize multiselect on query params

Using ember-cli-selectize multiselect on query params

I'm currently using ember-cli-selectize on a query param in ember.js. Pretty much like the following:

Template

{{ember-selectize
  content=makes
  optionValuePath="content.make"
  optionLabelPath="content.make"
  value=car_makes
  selection=carMakes
  multiple=false
  placeholder="Filter by car make..." }}

Controller

import Ember from 'ember';
export default Ember.Controller.extend({
   queryParams: ['car_makes'],
   car_makes: null,
   carMakes: Ember.A([])
});

However, I want to set 'multiple' to 'true' in my template and have an multiselect. Doing so in multiple mode means that 'value' is no longer supported.

The author suggests using a computed value, like so:

car_makes: Ember.computed.mapBy('carMakes', 'make')

The only problem is, Ember does not support query params as a computed value.

So, can anyone think of a way to trick Ember around this? Or am I going to have to make my own selectize component?

Solution

You can make use of add-value and remove-value actions provided by ember-cli-selectize. Take a look at the following twiddle. As you can see in my-route.hbs, I provided action handlers for add-value and remove-value. In my-route.js you can see how selected/deselected value iss added to/remove from car_makes which is an array; not a computed property. Hope this helps.