Question

我正在使用Multiselect视图：

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

是否可以在“选择”框中预选多个值并以编程方式更改所选值？背景：我想将三个“选择”框设置的不同组合保存为书签。加载书签时，我必须设置“选择”框值。
谢谢

Answer 1

是。在控制器中，您必须创建一个属性，以便在使用Ember.Select时保留所选的一个或多个值。

在下面的代码中，我将Greetings设置为选择框的内容，在列出那些问候的控制器中（检查ApplicationRoute），我还有一个名为selectedItems的属性，我'绑定到Select并且我正在使用其他几个属性来过滤我想要预先选择的值（1和3），以防在视图加载时没有选择任何项目。

这将呈现一个多选框，其中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());
    }
});

Answer 2

我创建了一个包含单个和多个“select”元素的完整示例。您可以设置默认值并以编程方式更改所选值，也可以使用“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的帮助！

也许有人知道如何修复变通方法（参见上面的代码注释）？

ember.js Ember.Select multiple = true with preselected values

2 个答案: