在查询参数上使用 ember-cli-selectize 多选

Question

我目前正在 ember.js 中的查询参数上使用 ember-cli-selectize。与以下内容非常相似：

模板

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

控制器

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

但是，我想在我的模板中将 'multiple' 设置为 'true' 并进行多选。在多模式下这样做意味着不再支持 'value'。

author suggests使用计算值，像这样：

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

唯一的问题是，Ember does not support query params as a computed value。

那么，有谁能想出一个办法来绕过这个 Ember 吗？还是我必须制作自己的选择组件？

Answer 1

您可以使用 ember-cli-selectize. Take a look at the following twiddle 提供的 add-value 和 remove-value 操作。正如您在 my-route.hbs 中所见，我为 add-value 和 remove-value 提供了操作处理程序。在 my-route.js 中，您可以看到 selected/deselected 值是如何从数组 car_makes 添加到 to/remove 的；不是计算出来的属性。希望这有帮助。

在查询参数上使用 ember-cli-selectize 多选

Using ember-cli-selectize multiselect on query params

ember.js

ember-cli

selectize.js

ember-query-params