2

私は複数選択ビューを使用しています:

{{view Ember.Select
  multiple="true"
  contentBinding="App.filtersProductController"
  selectionBinding="App.filtersController.products"
  optionLabelPath="content.fullName"
  optionValuePath="content.id"
  isVisibleBinding="App.filtersController.productListBox"}}

「選択」ボックスで複数の値を事前に選択し、選択した値をプログラムで変更することは可能ですか? 背景: 3 つの「選択」ボックス設定のさまざまな組み合わせをブックマークとして保存したいと考えています。ブックマークをロードするとき、「選択」ボックスの値を設定する必要があります。
ありがとうございました

4

2 に答える 2

6

はい。コントローラーでは、 を操作するときに選択した値を保持するためのプロパティを作成する必要がありますEmber.Select。

以下のコードでは、Greetings を選択ボックスのコンテンツとして設定しています。それらの Greetings を一覧表示するコントローラー (check ) には、バインドしてApplicationRouteいるというプロパティもあり、他のいくつかを使用しています。ビューがロードされたときにアイテムがまだ選択されていない場合に備えて、事前に選択したい値 (1 と 3) をフィルタリングするプロパティ。selectedItemsSelect

これにより、id が 1 または 3 のアイテムが選択済みとしてマークされた複数選択ボックスがレンダリングされます。ここでソースを見ることができます: http://jsfiddle.net/schawaska/Y8P4m/

ハンドルバー:

<script type="text/x-handlebars">
    <h1>Test</h1>
    {{view Ember.Select
           multiple="true"
           selectionBinding="controller.selectedItems"
           contentBinding="controller"
           optionLabelPath="content.text"
           optionValuePath="content.id"}}
</script>

JavaScript:

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

App.Store = DS.Store.extend({
    revision: 11,
    adapter: 'DS.FixtureAdapter'
});

App.Greeting = DS.Model.extend({
    text: DS.attr('string'),
    when: DS.attr('date'),
    selected: false,
    isSelected: function() {
        return this.get('selected');
    }.property('selected')
});

App.ApplicationController = Em.ArrayController.extend({
    preselected: function() {
        return this.get('content').filter(function(greeting) {
            return greeting.get('id') == 1 ||
                   greeting.get('id') == 3;
        });  
    }.property('content.@each'),
    selectedItems: function() {
        if(this.get('selected.length') <= 0) {
           return this.get('preselected'); 
        } else {
            return this.get('selected');
        }
    }.property('selected', 'preselected'),
    selected: function() {
        return this.get('content').filter(function(greeting) {
            return greeting.get('isSelected');
        })
    }.property('content.@each')
});

App.Greeting.FIXTURES = [
    {id: 1, text: 'First', when: '3/4/2013 2:44:52 PM'},
    {id: 2, text: 'Second', when: '3/4/2013 2:44:52 PM'},
    {id: 3, text: 'Third', when: '3/4/2013 2:44:52 PM'},
    {id: 4, text: 'Fourth', when: '3/4/2013 3:44:52 PM'}
];

App.ApplicationRoute = Em.Route.extend({
    setupController: function(controller) {
        controller.set('model', App.Greeting.find());
    }
});
于 2013-03-05T18:25:26.813 に答える
1

単一および複数の「選択」要素を含む完全な例を作成しました。デフォルトを設定し、選択した値をプログラムで、または「select」GUI 要素を使用して変更できます。コントローラーコード:

// class for single selects
App.SingleSelectFilterController = Ember.ArrayController.extend({
  selection: null,
  active: true,
  update: function(id) {
    this.set("selection", id);
  },
  getSelectedId: function() {
    return this.get("selection");
  }
});


// class for multi selects
App.MultiSelectFilterController = Ember.ArrayController.extend({
  selection: null,
  active: true,
  update: function(selectionIds) {
    // Workaround: Reinitializing "content". How to do it well?
    var contentCopy = [];
    for(i = 0; i < this.get("content").length; i++) {
      contentCopy.push(this.get("content")[i]);
    }
    this.set("content", contentCopy);
    this.set("selection", selectionIds);
  },
  selected: function() {
    var me = this;
    return this.get('content').filter(function(item) {
      for(i = 0; i < me.get("selection").length; i++) {
        if(me.get("selection")[i] === item.get('id')) { return true; }
      }
      return false;
    });
  }.property('content.@each'),
  getSelectedIds: function() {
    var ids = [];
    for(i = 0; i < this.get("selected").length; i++) {
      ids.push(this.get("selected")[i].get("id"));
    }
    return ids;
  }
});


// create single and multi select controllers
App.metricController = App.SingleSelectFilterController.create();
App.metricController.set("content", App.filterData.get("metrics"));
App.metricController.set("selection", "views");    // set default value for single select element
App.platformController = App.MultiSelectFilterController.create();
App.platformController.set("content", App.filterData.get("platforms"));
App.platformController.set("selection", ["plat-black"]);  // set default value for multi select element

完全な例:
http://jsfiddle.net/7R7tb/2/

MilkyWayJoe の助けに感謝します!

おそらく誰かが回避策を修正する方法を知っていますか (上記のコード コメントを参照)。

于 2013-03-07T21:57:24.890 に答える