0

这是我的第一个 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 使用单个控制器嵌入多个模型的最佳实践是什么？我想急切加载两个数组，我应该在登录模型中使用 Ember.RSVP 吗？还是我应该使用 ContainerView？

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

谢谢

4

2 回答 2

0

你在正确的轨道上。

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

至于Ember.Selects 之所以没有选择正确的项目是因为您没有正确设置值。

有两种方法可以从Ember.Select

  1. 使用value属性
  2. 使用selection属性

该value属性通过其值获取或设置选择。
该selection属性获取或设置内容的选定元素。
因为它们代表 2 个不同的东西，所以它们永远不应该绑定到控制器上的同一个属性。

在您的情况下， thevalue将是选定model.id的，而 theselection将是整个model.

由于您想使用 设置选择，因此您id需要将其绑定company_selid到. 使用 ember 数据时要注意的一件事是 ember 数据将创建带有字符串的模型，因此在设置时需要将其设置为字符串。user_selidvalueEmber.Select
idcompany_selid

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

于 2014-08-31T15:43:48.683 回答
0

Everything looks okay to me, just edit your .hbs like this:

<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>

Points:

  • Wrap the view with if blocks so that it will only load once the content is loaded
  • Do not put quotes in content and value inside view Ember.Select
于 2014-08-31T06:26:05.383 回答