ember.js Ember.Select multiple=true 预选值

Question

我正在使用多选 View :

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

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

Answer 1

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

在下面的代码中，我将 Greetings 设置为选择框的内容，在列出这些 Greetings 的 Controller 中(检查 ApplicationRoute)，我还有一个名为 selectedItems 的属性 我绑定(bind)到 Select 并且我正在使用其他几个属性来过滤我想要预选的值(1 和 3)，以防没有项目加载 View 时已选择。

这将呈现一个多选框，其中 id 为 1 或 3 的项目被标记为选中。您可以在此处查看来源:http://jsfiddle.net/schawaska/Y8P4m/

Handlebars :

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