ember.js ember.使用预选值选择multiple=true

我使用的是多选视图：

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

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

---

谢谢

是的。在控制器中，您必须创建一个属性，以便在使用

Ember时保留选定的值。选择

在下面的代码中，我将问候语设置为选择框的内容，在列出这些问候语的控制器中（选中
ApplicationRoute
），我还有一个名为
selectedItems
的属性，我将该属性绑定到
select
，并使用一些其他属性来过滤我想要预选的值（1和3）如果在加载视图时未选择任何项目

这将呈现一个包含id为1或3标记为选定项的项目的多选框。您可以在此处查看源代码：

车把：

<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>


试验
{{查看余烬。选择
multiple=“true”
selectionBinding=“controller.selectedItems”
contentBinding=“控制器”
optionLabelPath=“content.text”
optionValuePath=“content.id”}

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());
    }
});

window.App=Ember.Application.create（）；
App.Store=DS.Store.extend({
修订：11，
适配器：“DS.FixtureAdapter”
});
App.Greeting=DS.Model.extend({
文本：DS.attr（'string'），
时间：DS.attr（'date'），
选择：false，
isSelected:函数（）{
返回此.get（'selected'）；
}.property（'selected'）
});
App.ApplicationController=Em.ArrayController.extend({
预选：函数（）{
返回此.get（'content'）.filter（函数（问候语）{
返回问候语。get（'id'）==1||
greeting.get（'id'）==3；
});  
}.property（'content.@each'），
selectedItems:function（）{
如果（this.get（'selected.length'）我创建了一个包含单个和多个“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

//单个选择的类
App.SingleSelectFilterController=Ember.ArrayController.extend({
选择：空，
主动：对，
更新：功能（id）{
此.set（“选择”，id）；
},
getSelectedId:function（）{
返回此。获取（“选择”）；
}
});
//用于多选择的类
App.MultiSelectFilterController=Ember.ArrayController.extend({
选择：空，
主动：对，
更新：功能（SelectionId）{
//解决方法：重新初始化“内容”。如何做好？
var contentCopy=[]；
对于（i=0；i

完整的示例：




感谢MilkyWayJoe的帮助！


也许有人知道如何解决这个问题（请参见上面的代码注释）
太好了！非常感谢！！！因此，multiselect是有效的。但是现在我意识到我对simple（而不是multi）也有同样的问题元素。我想以编程方式更改所选元素，但无论给定值如何，它始终显示第一个元素。您也能给我举个例子吗？再次感谢。当整个案例运行时，我将列出我的代码。我已更新了小提琴，添加了一个带有
selectionBinding
的select。请注意r这两个例子中，可能都有你必须注意的事情。这是一个概念性的例子，展示了你应该在哪里添加代码来做类似的事情。