Ember.js：如何在單個控制器中設置多個Ember.Select的默認選項？

Question

這是我的第一個Ember.js應用程序。我發現的所有Ember的示例和教程都是單個控制器和單個模型或具有子模型的單個模型。 然而，這個應用程序並排放置兩個模型（公司和用戶）到一個控制器（登錄）。然而它不能很好地工作。

其jsbin.com代碼爲：jsbin.com/cirah

我的設計是：登錄控制器沒有一個定義的模型，但企業和用戶的兩個數組。兩者都有一個_selid來指示當前的選擇。

window.App = Ember.Application.create({}); 
App.ApplicationStore = DS.Store.extend({ 
    adapter: 'App.ApplicationAdapter', 
}); 
App.ApplicationAdapter = DS.RESTAdapter.extend({ 
    host: 'http://emberjs.azurewebsites.net', 
    headers: { 
     "Accept": "application/json", 
    } 
}); 
App.Company = DS.Model.extend({ 
    company: DS.attr('string') 
}); 
App.User = DS.Model.extend({ 
    userName: DS.attr('string'), 
    passwordHash: DS.attr('string'), 
}); 
App.Router.map(function() { 
    this.resource("login", { path: '/login' }); 
}); 
App.IndexRoute = Ember.Route.extend({ 
    redirect: function() { 
     this.transitionTo('login'); 
    }, 
}); 
App.LoginRoute = Ember.Route.extend({ 
    setupController: function (controller, model) { 
     var store = this.get('store'); 
     controller.set('companies', store.find('company')); 
     controller.set('company_selid', 2); 
     controller.set('users', store.find('user')); 
     controller.set('user_selid', 3); 
    }, 
}); 
App.LoginController = Ember.ObjectController.extend({ 
    companies: null, 
    company_selid: '2', 
    users: null, 
    user_selid: '3', 
    passwordHash: '', 
    actions: { 
     login: function() { 
      alert('login clicked'); 
     }, 
    }, 
}); 

登錄模板包含兩個數組的Ember.Select（s）。

<div class="input-group"> 
    <label for="company" class="input-group-addon ">Company:</label> 
    {{view Ember.Select 
     class="form-control" 
     content=companies 
     optionValuePath="content.id" 
     optionLabelPath="content.company" 
     value="company_selid" 
     selectionBinding="company_selid"}} 
</div> 

<div class="input-group"> 
    <label for="userName" class="input-group-addon">User Name:</label> 
    {{view Ember.Select 
     class="form-control" 
     content=users 
     optionValuePath="content.id" 
     optionLabelPath="content.userName" 
     value=user_selid 
     selection=user_selid 
    }} 
</div> 

服務器端返回：

http://emberjs.azurewebsites.net/companies?format=json 
{"companies":[ 
    {"id":1,"company":"ABC Company"}, 
    {"id":2,"company":"XYZ Company"} 
]} 
http://emberjs.azurewebsites.net/users?format=json 
{"users":[ 
    {"id":101,"userName":"Aaron","passwordHash":""}, 
    {"id":102,"userName":"Brian","passwordHash":""}, 
    {"id":103,"userName":"Corey","passwordHash":""}, 
    {"id":104,"userName":"David","passwordHash":""} 
]} 

我的問題是：

Q1：什麼是使用單個控制器中嵌入多個模型的Ember的最佳做法？我想要加載兩個arrys，我應該在登錄模式中使用Ember.RSVP嗎？或者我應該使用ContainerView？ Q2：在我的代碼中，兩個Ember.Select的默認選項不起作用，它總是第一個選項，即使我在登錄控制器和setupController中設置了它們兩次。如何解決它？

感謝

Answer 1

你在正確的軌道上。

對於裝載我將加載所有的數據使用Ember.RSVP.hash與您需要加載的所有數據返回一個對象model鉤，然後你可以設置在控制器中的正確元素setupController數據。

至於Ember.Select s它沒有選擇正確的項目的原因是因爲你沒有正確設置值。

有2種方式來使用value屬性

使用selection屬性

的value屬性會從一個Ember.Select

1. 獲取當前選定的項目或設置選擇它的價值是。
   selection屬性獲取或設置所選內容元素。
   由於它們代表2種不同的東西，它們不應該被綁定到控制器上的同一個屬性。

   在你的情況下，value將被選中model.id和selection將是整個model。

   是，你想使用設置選擇id你需要綁定company_selid和user_selid到Ember.Select的value財產。
   使用餘燼數據時需要注意的一件事是，餘燼數據將創建id作爲字符串的模型，因此設置company_selid時需要將其設置爲字符串。

   我在這裏建立一個工作斌：http://jsbin.com/gaduve/1/edit

Answer 2

一切看起來還好我，只是編輯.hbs這樣的：

<div class="input-group"> 
<label for="company" class="input-group-addon ">Company:</label> 
{{#if companies}} 
    {{view Ember.Select 
     class="form-control" 
     content=companies 
     optionValuePath="content.id" 
     optionLabelPath="content.company" 
     value=company_selid 
     selectionBinding=company_selid}} 
{{/if}} 
</div> 

<div class="input-group"> 
<label for="userName" class="input-group-addon">User Name:</label> 
{{#if users}} 
    {{view Ember.Select 
     class="form-control" 
     content=users 
     optionValuePath="content.id" 
     optionLabelPath="content.userName" 
     value=user_selid 
     selection=user_selid 
    }} 
{{/if}} 
</div> 

點：

• 裹的觀點，如果塊，這樣，它只會加載一旦內容被加載
• 不要把內容和價值觀報價內Ember.Select