在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

我不得不制作兩個系列。 一個分組，另一個只是內容，以便可以選擇適當的選項。

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

然后將groupsServiceCodes中的內容展平，以維護select的順序：

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

這有點像黑客，我認為Ember想要一個更好的解決方案，但這對我有用。 我很想聽聽有關改善這一點的想法。

Answer 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

Answer 4

Ember.Select不支持optgroups，但您可以通過為其提供新模板和選項的新模板來擴展Ember.Select。 我這樣做是為了支持在Ember中選擇的.js選擇。

Answer 5

Ember現在支持開箱即用。 請參閱此git pull請求https://github.com/emberjs/ember.js/pull/2465