Ember.Select what is the correct OptionValuePath and OptionLabelPath? - ember.js

Question

example here
http://jsfiddle.net/tobikko/ysFC6/10/
how do i really find out what to put in for OptionValuePath and OptionLabelPath? as you can see the dropdown is there with a list but the values are not visible.
in this case i know that it should be OptionLabelPath: "content.firstName" but what if i didn't know?
i created the focusOut function to examine the content of the view and it looks like this
in my real app that i'm having problem with, each object in the content doesn't contain the ember1340135889380_meta object or the __proto part. is that the problem? how do i fix it?
<script type="text/x-handlebars">
{{view App.SelectView }}
<p>Selected: {{App.selectedPersonController.person.fullName}}
(ID: {{App.selectedPersonController.person.id}})</p>
</script>
window.App = Ember.Application.create();
App.SelectView = Ember.Select.extend({
contentBinding: "App.peopleController",
selectionBinding: "App.selectedPersonController.person",
optionLabelPath: "firstName",
optionValuePath: "id",
prompt: "select",
focusOut: function () {
var test = this.get('content');
}
})
App.Person = Ember.Object.extend({
id: null,
firstName: null,
lastName: null,
fullName: function() {
return this.get('firstName') + " " + this.get('lastName');
}.property('firstName', 'lastName').cacheable()
});
App.selectedPersonController = Ember.Object.create({
person: null
});
App.peopleController = Ember.ArrayController.create({
content: [
{
id: 1,
firstName: 'Yehuda',
lastName: 'Katz'},
{
id: 2,
firstName: 'Tom',
lastName: 'Dale'},
{
id: 3,
firstName: 'Peter',
lastName: 'Wagenet'},
{
id: 4,
firstName: 'Erik',
lastName: 'Bryn'}
]
});

Answer 1

As stated in the documentation, you always have to prepend content. to the path of the property which shall be used as id and label, see http://jsfiddle.net/pangratz666/B2rJN/.
Your mentioned ember1340135889380_meta and similar properties on an object indicate that it's an instance of an Ember.Object. But the entries in the Ember.Select's content do not need to be an instance of an Ember.Object, the path also works for "normal" objects, as you use in your example.
Background:
The Ember.View is basically rendered as follows:
<select>
{{#if view.prompt}}
<option value>{{view.prompt}}</option>
{{/if}}
{{#each view.content}}
{{view Ember.SelectOption contentBinding="this"}}
{{/each}}
</select>
So in the each-iteration the current item is made available to the Ember.SelectOption view via content as well. That's why you have to prepend content. when you specify the path to the id / label property. Makes sense?