Question

这是我的第一个Ember.js应用程序。我发现的所有Ember示例和教程都是单个控制器，具有单个模型或具有子模型的单个模型。但是，此应用程序将两个模型（公司和用户）并排放入单个控制器（登录）中。然而，它并没有很好地发挥作用。

enter image description here

其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":""}
]}

我的问题是：

问题1：使用单一控制器嵌入多个模型的Ember最佳做法是什么？我想加载两个arrys，我应该在登录模型中使用Ember.RSVP吗？或者我应该使用ContainerView吗？

Q2：在我的代码中，两个Ember.Select的默认选项不起作用，它始终是第一个选项，即使我在登录控制器和setupController中设置它们两次。如何解决？

谢谢

Answer 1

一切看起来都不错，只需编辑你的.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>

要点：

使用if块包裹视图，以便只在加载内容后加载
请勿在视图内容和值内添加引号Ember.Select

Answer 2

你走在正确的轨道上。

为了加载数据，我将使用Ember.RSVP.hash加载model挂钩中的所有数据，以返回包含所有需要加载的数据的对象，然后可以在控制器中设置正确的元素在setupController。

对于Ember.Select，没有选择正确项目的原因是因为您没有正确设置值。

有两种方法可以从Ember.Select

中获取当前所选的项目

使用value属性
使用selection属性

value属性获取或设置选项按其值 selection属性获取或设置所选内容元素因为它们代表两种不同的东西，所以它们永远不应该被绑定到控制器上的相同属性。

在您的情况下，value将是选定的model.id，selection将是整个model。

如果您想使用id设置选择，则需要将company_selid和user_selid绑定到value的{{1}}属性。
使用ember数据时需要注意的一点是，ember数据会创建Ember.Select作为字符串的模型，因此在设置id时需要将其设置为字符串。

我在这里设置了一个工作箱：http://jsbin.com/gaduve/1/edit

Ember.js：如何在单个控制器中设置多个Ember.Select的默认选项？

2 个答案: