使用对象作为选项时，如何设置Ember.js select视图的值？

Question

在使用对象而不是字符串时，我遇到了一些问题，无法弄清楚如何让Ember的select视图更新dom。此示例的行为符合我的预期：

http://jsfiddle.net/XZ9b7/

仅使用字符串数组作为值，通过单击按钮将绑定属性的值设置为新值将自动更新dom并将dropdown设置为相同的值。

但是，在此示例中使用对象时：

http://jsfiddle.net/pRBKt/

我尝试将绑定属性的值设置为id、value和option对象本身的副本，但无法使其影响select视图。

在使用对象作为选项时，我只需要一种方法来设置选择视图的值

Answer 1

我在你的小提琴里添加了另一个按钮：

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

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

我认为你必须使用相同的对象，而不是副本。因此，在本例中，您必须从绑定到Ember.Select的content属性的数组中选取对象。

编辑:使用#each和{{action}}编辑jsfiddle。我认为它清理了模板和代码。

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'}
];