3

文字列の代わりにオブジェクトを使用するときに、Emberの選択ビューを取得してDOMを更新する方法を理解するのに問題があります。この例は、私が期待するように動作します。

http://jsfiddle.net/XZ9b7/

値に文字列の配列のみを使用し、ボタンをクリックしてバインドされたプロパティの値を新しい値に設定すると、自動的にdomが更新され、ドロップダウンが同じ値に設定されます。

ただし、この例でオブジェクトを使用する場合：

http://jsfiddle.net/pRBKt/

バインドされたプロパティの値をid、value、およびオプションオブジェクト自体のコピーに設定しようとしましたが、選択ビューに影響を与えることができません。

オプションにオブジェクトを使用するときに選択ビューの値を設定する方法が必要です

4

1 に答える 1

4

私はあなたのフィドルに他のボタンを追加しました：

<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'}
];
于 2012-07-18T23:00:08.850 に答える