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

Question

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

http://jsfiddle.net/XZ9b7/

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

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

http://jsfiddle.net/pRBKt/

我尝试将绑定属性的值设置为 id、值和选项对象本身的副本，但我无法让它影响选择视图。

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

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 属性的数组中获取对象。

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

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