在Ember.js中创建分组选择

Question

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

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

Answer 1

现在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")

Answer 2

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

\n\n

我必须制作两个集合。一个是分组的，另一个只是内容，以便可以选择正确的选项。

\n\n

groupedServiceCodes = [Ember.Object.create({label: \'Label for optgroup\', content: Ember.A()}), \xe2\x80\xa6]\n

\n\n

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

\n\n

flattenedServiceCodes = [].concat(object.get(\'content\'), \xe2\x80\xa6)\n

\n\n

这有点像黑客，我认为 Ember 想要一个更好的解决方案，但这对我有用。我很想听听有关改进这一点的想法。

\n