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