Как использовать флажки в отношениях «многие ко многим»?

Question

У меня есть две модели (роль, разрешение) со многими отношениями ко многим. Существует список разрешений, и некоторые из них могут иметь роль. Я хочу создать страницу редактирования для Ролей и добавить туда Разрешения в виде списка флажков.

редактировать шаблон:

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

модели:

var Role = DS.Model.extend({ 
     agents: DS.hasMany('agent', {async: false}), 
     name: DS.attr('string'), 
     permissions: DS.hasMany('permission', {async: true}) 
    }); 

    var Permission = DS.Model.extend({ 
     type: DS.attr('string'), 
     name: DS.attr('string'), 
     roles: DS.hasMany('permission', {async: false}) 
    }); 

контроллер редактировать роль

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') 
    }); 

Среди проблем:

1. Я не могу определить, как отмечать флажок, если этот флажок установлен, если эти разрешения уже находятся в model.permissions
2. Я не могу сохранить разрешения на сохранение роли. Контроллер не видит «разрешения» данные (this.get («разрешение») в контроллере редактировать роль)

разрешений - список разрешений, что роль содержит

permissions_list - список всех разрешений на базе

Answer 1

самый простой способ сделать это (ИМХО), чтобы создать компонент для флажком:

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> 

Рабочий раствор here