Ember.Selectを使用してEmber.jsでselectを作成するのは比較的簡単です。
問題は、optgroupを使用して、これをグループ化された選択にするにはどうすればよいかということです。これは組み込まれているとは思いませんが、テンプレートにいくつかの変更を加えることで可能になると思います。
質問する
2186 次
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
これが私が思いついた解決策です。https://gist.github.com/3297425
私は2つのコレクションを作らなければなりませんでした。適切なオプションを選択できるように、1つはグループ化され、もう1つはコンテンツのみです。
groupedServiceCodes = [Ember.Object.create({label: 'Label for optgroup', content: Ember.A()}), …]
次に、groupedServiceCodesのコンテンツをフラット化して、選択の順序を維持します。
flattenedServiceCodes = [].concat(object.get('content'), …)
これはちょっとしたハックで、Emberはもっと良い解決策を望んでいると思いますが、これは私にとってはうまくいきます。これを改善するための考えを聞いてみたいです。
于 2012-08-08T18:51:04.500 に答える
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 に答える
1
Ember.Selectはoptgroupsをサポートしていませんが、Ember.Selectを拡張して、新しいテンプレートとオプションの新しいテンプレートを提供することでサポートできます。これは、Ember内でchosen.jsの選択をサポートするために行いました。
于 2012-08-07T13:54:46.170 に答える
0
Emberはこれをすぐにサポートするようになりました。このgitプルリクエストを参照してくださいhttps://github.com/emberjs/ember.js/pull/2465
于 2015-05-21T15:04:57.090 に答える