0

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?

Ben
  • 458
  • 1
  • 5
  • 9

1 Answers1

1

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.

feanor07
  • 3,328
  • 15
  • 27
  • I made some improvements on your suggestion. The main thing was the selectize input was not populated upon a refresh of the page. Some other things were that I needed to use Ember.A on my version of Ember, and I also wanted to mess with the formatting of what was stored in the query param. [Here is my twiddle](https://ember-twiddle.com/30bbf117dc95d2e0d24891945f02092a?openFiles=routes.my-route.js%2C). I'm also unsure if I handled my route the correct way. – Ben Mar 31 '17 at 13:25
  • i will have a look at it when i have time. – feanor07 Mar 31 '17 at 13:41