"options" binding with an enum as data source

Question

I need to bind a dropdown to an enum. For this I've made a key_value_pair class and I manually go through each enum option to add it. Is there a more elegant way to achieve this?

HTML:

<select data-bind="options: regions, value: region, optionsValue: 'key', optionsText: 'value'"></select>

TypeScript:

class key_value_pair<key_type, value_type>
{
    key: key_type;

    value: value_type;

    constructor(key: key_type, value: value_type)
    {
        this.key = key;

        this.value = value;
    }
}

class calculator
{
    regions: KnockoutObservableArray<key_value_pair<number, string>>;

    region: KnockoutObservable<API.region>;

    constructor()
    {
        this.regions = ko.observableArray();
        this.regions.push(new key_value_pair(API.region.US, API.region[API.region.US]));
        this.regions.push(new key_value_pair(API.region.Europe, API.region[API.region.Europe]));
        this.regions.push(new key_value_pair(API.region.Korea, API.region[API.region.Korea]));
        this.regions.push(new key_value_pair(API.region.Taiwan, API.region[API.region.Taiwan]));
        this.regions.push(new key_value_pair(API.region.China, API.region[API.region.China]));

        this.region = ko.observable();
    }
}

Answer 1

Your solution works fine and I didn't find a better solution. I've just upgraded it little bit, by automatic fill the options, so it is usable to any Enum class.

Here I found how to enumerate Enum type

export class SelectEditorObject
{
    private options: KnockoutObservableArray<keyValuePair<number, string>>;
    private selection: KnockoutObservable<number>;

    constructor(e: any, value: number)
    {
        var options = SelectEditorObject.getNamesAndValues(e);
        this.selection = ko.observable<number>(value);
        this.options = ko.observableArray<keyValuePair<number, string>>(options);
    }

    public toString()
    {
        var selected = undefined;
        this.options().forEach((pair) =>
        {
            if (pair.key === this.selection())
            {
                selected = pair.value;
            }
        }, this);
        return selected;
    }

    public getValue()
    {
        return this.selection();
    }

    private static getNames(e: any)
    {
        return Object.keys(e).filter(v => isNaN(parseInt(v, 10)));
    }

    private static getValues(e: any)
    {
        return Object.keys(e).map(v => parseInt(v, 10)).filter(v => !isNaN(v));
    }

    public static getNamesAndValues(e: any): Array<keyValuePair<number, string>>
    {
        return SelectEditorObject.getValues(e).map(v => { return new keyValuePair(v, e[v]) });
    }
}

export class keyValuePair<key_type, value_type>
{
    public key: key_type;
    public value: value_type;
    constructor(key: key_type, value: value_type)
    {
        this.key = key;
        this.value = value;
    }
}