Javascript 如何在ember.js中在同一路径中设置多个控制器？

我对ember.js比较陌生。我有两种型号

User

和

Role

App.User = DS.Model.extend({
    name: DS.attr('string'),
    roles: DS.hasMany('role')
});

App.Role = DS.Model.extend({
    name: DS.attr('string')
});

在我的应用程序中，我需要为一个用户分配和/或删除角色。为此，我需要循环并比较两个控制器角色（来自user has roles）和所有可用角色

通过在

user/edit模板中执行此操作，我可以获得分配给用户的角色

Assigned Roles: {{#each role in roles}}*{{role.name}}{{/each}}

但是，我如何在同一路线上拥有另一个角色控制器，它将拥有独立于用户的所有可用角色？如果我在UserEditRoute中执行setupController，将为RoleController创建名称冲突

我的目标是用复选框列出所有角色。已分配给用户的角色将被选中，其他角色将被取消选中

在用户控制器中，您可以设置“需要”属性，以告知余烬连接控制器角色

您还应该为该控制器分配模型，以便设置UsersEditRoute的setupController钩子，并列出您的角色

App.UsersEditRoute = Ember.Route.extend({
  setupController: function(controller,model) {
        controller.set('model', model);//UsersEditController
        this.controllerFor('roles').set('model',this.store.find('role'));
  }
});

控制器

App.UsersEditController = Em.ObjectController.extend({
    needs: "roles",
    rolesController: Ember.computed.alias("controllers.roles")
});
App.RolesController = Em.ArrayController.extend({});

最后是模板

  <script type="text/x-handlebars" data-template-name="users/edit">
    <h3>User Edit</h3>
      <p>Name: {{name}}</p>
      <p>Assigned Roles: {{#each userRole in roles}}&nbsp;*{{userRole.name}}{{/each}}</p>
      <p>Available Roles:{{#each role in rolesController}}&nbsp;*{{role.name}}{{/each}}</p>
  </script>


用户编辑
名称：{{Name}

分配的角色：{{{#角色中的每个用户角色}}*{{{userRole.name}}{{/each}}

可用角色：{{{#rolesController中的每个角色}}*{{role.name}{{{/each}}


jshiddle
这太完美了。谢谢！