5

使用Ember.Select在 Ember.js 中创建选择相对容易。

问题是，如何使用 optgroup 将其变为分组选择。我不认为这是内置的，但我猜对模板进行一些修改是可能的。

4

5 回答 5

9

Ember 现在原生支持这一点，但有一些问题。在 1.4.0 中，以下解决方案有效...

这是示例数据：

foos: Ember.A([{value: 'foo', label: 'Foo', group: 'Foos'}, {value: 'bar', label: 'Bar', group: 'Bars'}, {value: 'bar2', label: 'Bar2', group: 'Bars'}, {value: 'foo2', label: 'Foo2', group: 'Foos'}])

这是视图助手：

{{view Ember.Select content=controller.foos optionLabelPath='content.label' optionValuePath='content.value' optionGroupPath='group'}}

如果您只是执行上述操作，您将获得一个如下所示的选择列表：

在此处输入图像描述

我可以解决这个问题的唯一方法是首先按分组字段对数组进行排序：

foos: Ember.A([{value: 'foo', label: 'Foo', group: 'Foos'}, {value: 'bar', label: 'Bar', group: 'Bars'}, {value: 'bar2', label: 'Bar2', group: 'Bars'}, {value: 'foo2', label: 'Foo2', group: 'Foos'}]).sortBy("group")

在此处输入图像描述

于 2014-03-08T15:38:39.660 回答
3

这里的答案有点过时了。Ember 现在支持对内容进行分组。想象一下你有：

App.SomeController = Ember.Controller.extend({
  content: [{value: 'foo', label: 'Foo', group: 'Foos'}, {value: 'bar', label: 'Bar', group: 'Bars'}]
})

然后你可以做

Ember.Select contentBinding='content' optionLabelPath='content.label' optionValuePath='content.value' optionGroupPath='group'

注意 optionGroupPath 不做 content.path，只是 path

于 2014-03-04T15:35:43.427 回答
3

这是我想出的解决方案。https://gist.github.com/3297425

我不得不制作两个系列。一个分组，另一个只是内容，以便可以选择正确的选项。

groupedServiceCodes = [Ember.Object.create({label: 'Label for optgroup', content: Ember.A()}), …]

然后将 groupedServiceCodes 中的内容展平以保持选择的顺序：

flattenedServiceCodes = [].concat(object.get('content'), …)

这有点小题大做，我认为 Ember 想要一个更好的解决方案，但这对我有用。我很想听听关于改进这一点的想法。

于 2012-08-08T18:51:04.500 回答
1

Ember.Select 不支持 optgroups，但您可以通过为其提供新模板和选项的新模板来扩展 Ember.Select。我这样做是为了支持 Ember 中的 selected.js 选择。

于 2012-08-07T13:54:46.170 回答
0

Ember 现在支持开箱即用。参考这个 git pull request https://github.com/emberjs/ember.js/pull/2465

于 2015-05-21T15:04:57.090 回答