Question

I’ve spent many hours on this trying various things, and I’m finally throwing in the towel.

I have an array of objects that I am displaying on a page in a list using a {{#each}} helper. A particular property needs to be bound to an Ember.Select view. So if I have 10 items, there will be 10 Select views.

The possible options for the Select view is defined as an array. This is working, the Select views display their labels/values correct. The issue is with binding to the property I want to be set. I cannot get a context to the object in the {{#each}}. Here’s what I have:

{{#each questions}}
    {{view Ember.Select
        contentBinding="Editor.Enums.
        optionValuePath="content.value"
        optionLabelPath="content.label"
        valueBinding="??what goes here if I want to change the 'type' property??"
        prompt="Select"
    }}
{{/each}}

All examples bind 1 Select view to a property sitting on the global application, it does not allow me to work with repeated elements.

Edit: I have made an interesting observation… it does SEEM to be bounded! I previously thought they were not as they were not showing the value that was currently set to the property. However, upon changing the selection, the bounded property DOES change. So something else is at work here.

Edit: If I take away the “prompt”, it selects the first item in the list, and UPDATES my bounded properties to that value! What gives head table. This should not be this hard…

Thanks!
Daryl

Answer 1

I don’t know if understand, but if you want define the context in the {{#each}} helper, you can write something like this:

{{#each question in questions}}
   {{question.type}}
{{/each}}

EDIT: I think I got it working as you expect.
In fact the initial value is overriden by the prompt either if it is null, or if it’s not a right choice of the select.

<script type="text/x-handlebars">
  {{#each App.questions}}
    {{view Ember.Select
      contentBinding="App.content"
      optionValuePath="content.type"
      optionLabelPath="content.label"
      prompt="Select a value"        
      valueBinding="type"        
    }}
    {{type}}
  {{/each}}
</script>

App = Ember.Application.create({});
App.questions = [
  {type: null},
  {type: 'type1'}
];

App.content = [
  {label: "This is type 1", type: "type1"},
  {label: "This is type 2", type: "type2"}
];

​
http://jsfiddle.net/Sly7/ByRNt/12/