Seleccionar desplegable con Ember

Question

Estoy tratando de producir una entrada seleccionada y pasar el objeto seleccionado al evento de cambio en la vista. El ejemplo de contacto de Ember usa un <ul> Pero con una selección, la vista debe estar fuera de cada uno, de lo contrario, el cambio incluso no se dispara.

Aquí está la vista JS:

App.SelectView = Ember.View.extend({

    change: function(e) {
        //event for select
        var content = this.get('content');
        console.log(content);   

        App.selectedWidgetController.set('content', [content]);
    },
    click: function(e) {
        //event for ul
        var content = this.get('content');
        console.log(content);   

        App.selectedWidgetController.set('content', [content]);
    }
});

los ul Del ejemplo funciona:

<ul>
    {{#each App.widgetController.content}}
        {{#view App.SelectView contentBinding="this"}}
            <li>{{content.name}}</li>
        {{/view}}
    {{/each}}
</ul>

Pero si reemplazo HTML directamente, el evento de cambio no se dispara (lo que tiene sentido)

<select>
    {{#each App.widgetController.content}}
        {{#view App.SelectView contentBinding="this"}}
            <option>{{content.name}}</option>
        {{/view}}
    {{/each}}
</select>

Así que supongo que la selección debe envolverse en la vista ... ¿en cuyo caso paso el objeto relevante? ... Este código da como resultado que se apruebe toda la matriz:

{{#view App.select_view contentBinding="App.widgetController.content"}}
    <select>
    {{#each App.widgetController.content}}
        <option>{{name}}</option>
    {{/each}}
    </select>
{{/view}}