Javascript 如何在多对多关系中使用复选框？

我有两个多对多关系的模型（角色、权限）。有一个权限列表，角色可以拥有其中的一些权限。我想为角色创建编辑页面，并将这些权限添加为复选框列表

编辑模板：

<form>
    {{input type="text" placeholder="role name" value=name}}
    <br />
    {{#each permissions_list}}
        <label>
            {{input type="checkbox" name="permissions[]"}}{{name}}
        </label><br />
    {{/each}}
    <button {{action 'save'}}>Edit</button>
</form>

编辑角色控制器

    export default Ember.ObjectController.extend({
        permissions_list: [],
        actions: {
            save: function() {
                return this.get('model').save();
            }
        },
        load_permissions: function() {
            this.set('permissions_list', this.store.find('permission'));
        }.on('init')
    });

问题是：

如果此权限已在model.permissions中，我无法找到如何将复选框标记为选中

我无法保存角色保存的权限。控制器未看到“权限”数据（编辑角色控制器中的this.get（'permissions'））

权限-该角色包含的权限列表

---

权限列表-数据库中所有权限的列表执行此操作最简单的方法（IMHO）是为复选框创建一个组件：

App.PermissionCheckboxComponent = Ember.Component.extend({
  tagName: '',
  checked: function(){
    var permission = this.get('permission.name');
    var rolePermissions = this.get('role.permissions').mapBy('name');

    return rolePermissions.contains(permission);    
  }.property(),

  save: function(){
    var permissionChecked = this.get('checked');
    var role = this.get('role');
    var permission = this.get('permission');
    var permissions = role.get('permissions');

    if(permissionChecked){
      role.get('permissions').addObject(permission);
      permission.save();
      role.save();
    }
    else {
      role.get('permissions').removeObject(permission);
      role.save();
    } 
  }.observes('checked')    
});

您的组件模板如下所示：

<script type="text/x-handlebars" id="components/permission-checkbox">
  {{ input type='checkbox' checked=checked }} {{permission.name}}
</script>

<h2>Edit Permissions</h2>
<ul>
{{#each role in model.roles}}
  <li>{{role.name}}</li>
  <ul>
  {{#each permission in model.permissions}}
    <li>{{ permission-checkbox permission=permission role=role }}</li>
  {{/each}}
  </ul>
{{/each}}
</ul>

{{input type='checkbox'checked=checked}{{{permission.name}}

然后，您可以在编辑模板中使用此组件，如下所示：

<script type="text/x-handlebars" id="components/permission-checkbox">
  {{ input type='checkbox' checked=checked }} {{permission.name}}
</script>

<h2>Edit Permissions</h2>
<ul>
{{#each role in model.roles}}
  <li>{{role.name}}</li>
  <ul>
  {{#each permission in model.permissions}}
    <li>{{ permission-checkbox permission=permission role=role }}</li>
  {{/each}}
  </ul>
{{/each}}
</ul>

编辑权限

{{{#model.roles中的每个角色}
{{role.name}

{{{#model.permissions中的每个权限}
{{权限复选框权限=权限角色=角色}
{{/每个}}

{{/每个}}

---

工作解决方案

谢谢。这是可行的，但还有另一个问题。如果角色已更改，则复选框值不会更改。例如：具有权限[1,2]的角色/1和具有权限[3,4]的角色/2。如果我打开角色/1并切换到角色/2，则仍会检查权限[1,2]。如果我打开role/2，权限[3,4]将被选中，没关系。我发现了。刚将.property（）更改为.property（'role.permissions'）