Question

I’m having some trouble figuring out how to get Ember’s select view to update the dom when using objects instead of strings. This example behaves how I would expect:

http://jsfiddle.net/XZ9b7/

Using only an array of strings for values, setting the bound property’s value to a new value by clicking the buttons will automatically update the dom and set the dropdown to the same value.

When using objects in this example however:

http://jsfiddle.net/pRBKt/

I tried setting the bound property’s value to the id, value, and a copy of the option object itself, and I can’t get it to affect the select view.

I just need a way to set the value of a select view when using objects for options

Answer 1

I’ve added an other button in your fiddle:

<div><button onclick="App.someObject.set('letterSelection', App.someOptions.objectAt(0));">real a</button></div>

http://jsfiddle.net/Sly7/BYjk6/#base

I think you have to use the same object, but not a copy. So in your case you have to pick up the object from the array bound to the Ember.Select’s content property.

EDIT: jsfiddle using #each and {{action}}. I think it cleans up the template and the code.

http://jsfiddle.net/Sly7/sCr8T/

<script type="text/x-handlebars">
  {{view Ember.Select
    contentBinding="App.someOptions"
    selectionBinding="App.someObject.letterSelection"
    optionLabelPath="content.val"
    optionValuePath="content.id"
  }}
  {{App.someObject.letterSelection.val}}
  {{#each option in App.someOptions}}
    <div>
      <button {{action "updateSelection" target="App.someObject" context="option"}}>{{option.val}}</button>
    </div>        
  {{/each}}
</script>

JavaScript:

window.App = Ember.Application.create();

App.someObject= Ember.Object.create({
  title: "Some Title",
  letterSelection: null, 

  updateSelection: function(event){
    var newSelection = event.context;
    this.set('letterSelection', newSelection);
  }
});

App.someOptions = [
  {'id':'id_a','val':'a'},
  {'id':'id_b','val':'b'},
  {'id':'id_c','val':'c'},
  {'id':'id_d','val':'d'}
];