Javascript 在Ember.js中创建分组选择

使用在Ember.js中创建select相对容易

---

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

Ember.Select不支持optgroup，但您可以扩展Ember.Select，方法是为它提供一个新模板，为选项提供一个新模板。我这样做是为了在Ember中支持selected.js selects。

以下是我提出的解决方案

我不得不做两次收集。一个分组，另一个仅包含内容，以便选择适当的选项

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

然后将groupedServiceCodes中的内容向下展开，以保持选择的顺序：

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

---

这是一个有点黑客，我想余烬是想要一个更好的解决方案，但这对我来说是可行的。我很想听听关于改进这一点的想法。

这里的答案有点过时了。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

这是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")

---

余烬现在支持这一开箱即用的功能。请参阅此git pull请求

，您能提供一个示例吗？我正试图这样做，但调试Handlebar中的上下文是一个黑盒练习。此时，我只是随意更改代码，看看会发生什么。使用

{{log yourVar}}

，例如

{{{log view}}

，调试Handlebar上下文现在稍微容易一些，这将对浏览器的开发人员工具控制台执行

console.dir

。GIT repo对此有任何问题吗？