Geek asks and answers

Creating Group Choices in Ember.js

It is relatively easy to create selections in Ember.js using Ember.Select .

The question is, how do I do this in a grouped select using optgroup. I do not think this is built-in, but I assume that this is possible with some changes to the template.

+5
source share
5 answers

Here is the solution I came across. https://gist.github.com/3297425

I had to make two collections. One is grouped and the other is just content so that you can choose the right option.

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

And then flatten the contents from groupedServiceCodes to maintain the order for selection:

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

, , , . .

+3

Ember, gotchas. 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'}}

, , :

enter image description here

, , - :

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

enter image description here

+9

. 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'

, GroupPath content.path,

+3

Ember.Select does not support optgroups, but you can extend Ember.Select to do this by providing a new template for it and a new template for parameters. I did this to select selected.js in Ember.

+1
source

Ember now supports this out of the box. Refer to this git pull request https://github.com/emberjs/ember.js/pull/2465

0
source

More articles:


All Articles