backbone-forms: style options of a select field?

Question

I am using backbone-forms and I'm wondering, whether it is possible to add some styles to options (<option>) in a select field. The app is quite complex so just a snippet here:

    this.schema = {
        xName : {
            title : i18n.t('x.name') + " " + i18n.t('x.name-msg'),
            type : 'Text',
            validators : [
                {
                    type : 'required',
                    message : i18n.t('x.name-required-msg')
                },
                {
                     type : 'regexp',
                     regexp : /.{3,}/,
                     message : i18n.t('x.name-tooShort-msg')
                }
            ],
        },
    */ ... */
        selectY : {
            title : i18n.t('Y.project'),
            type : 'Select',
            options : this.getSomeOptions() //is defined and works well!!
        }
    /* and so on ... */

Now it is quite obvious, that you cannot add just a style attribute to selectY in order to differntiate between it's options ans style them. E.g. (from the backbone-forms docs):

fieldAttrs

A map of attributes to add to the field, e.g. { style: 'background: red', title: 'Tooltip help' }

In our (or any) schema you can define name and label for the options. Do you see any other possibility than using jQuery in a dirty hack when/on rendering (or, more specific: showing) the form field? Any suggestion would be appreciated.

Answer 1

There isn't a built-in way of doing this so you would probably want to create a custom editor which extends Select and overrides the _arrayToHtml method, e.g.:

var CustomEditor = Backbone.Form.editors.Select.extend({ arrayToHtml: function(array) { ... } });

See https://github.com/powmedia/backbone-forms#custom-editors