"options" binding with an enum as data source 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:

&lt;select data-bind="options: regions, value: region, optionsValue: 'key', optionsText: 'value'"&gt;&lt;/select&gt;


TypeScript:

class key_value_pair&lt;key_type, value_type&gt;
{
    key: key_type;

    value: value_type;

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

        this.value = value;
    }
}

class calculator
{
    regions: KnockoutObservableArray&lt;key_value_pair&lt;number, string&gt;&gt;;

    region: KnockoutObservable&lt;API.region&gt;;

    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();
    }
}
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&lt;keyValuePair&lt;number, string&gt;&gt;;
    private selection: KnockoutObservable&lt;number&gt;;

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

    public toString()
    {
        var selected = undefined;
        this.options().forEach((pair) =&gt;
        {
            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 =&gt; isNaN(parseInt(v, 10)));
    }

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

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

export class keyValuePair&lt;key_type, value_type&gt;
{
    public key: key_type;
    public value: value_type;
    constructor(key: key_type, value: value_type)
    {
        this.key = key;
        this.value = value;
    }
}