ember.js Ember.Select多=真與預選值

Question

我使用的是多選的看法：

{{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時保持所選的一個或多個值。

在下面的代碼我設置問候語爲選擇框的內容，在列出的問候（檢查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

我已經創造了單，多 「選擇」 元素一個完整的例子。您可以設置默認值並以編程方式或使用「選擇」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他的幫助！

也許有人知道如何解決該解決方法（請參閱上面的代碼註釋）？