Ember.js, как наблюдать ключи массива, измененные на вход

Question

У меня есть объект с несколькими десятками настроек, некоторые настройки зависят от других настроек, поэтому мне нужно наблюдать, изменилась ли какая-либо настройка.

import Ember from 'ember'; 

export default Ember.Controller.extend({ 
    allPermissionChanged: function() { 
     alert('!'); 
    }.observes('hash.types.[].permissions'), 
    permissionsHash: { 
    orders:{ 
     types: [ 
     { 
      label: 'All', 
      permissions: { 
      view: true, 
      edit: false, 
      assign: false, 
      "delete": false, 
      create: true 
      } 
     }, 

     } 
     ], 
     permissions:[ 
     { 
      label:'Просмотр', 
      code:'view' 
     }, 
     { 
      label:'Редактирование', 
      code:'edit' 
     }, 
     { 
      label:'Распределение', 
      code:'assign' 
     }, 
     { 
      label:'Удаление', 
      code:'delete' 
     }, 
     { 
      label:'Создание', 
      code:'create' 
     } 
     ] 
    } 
    } 

}); 

Далее я пытаюсь связать каждую установку для ввода

<table class="table table-bordered"> 
    <thead> 
    <tr> 

     {{#each hash.types as |type|}} 
      <th colspan="2">{{type.label}}</th> 
     {{/each}} 
    </tr> 

    </thead> 
    <tbody> 
    {{#each hash.permissions as |perm|}} 
     <tr> 
      {{#each hash.types as |type|}} 
      {{#if (eq (mut (get type.permissions perm.code)) null)}} 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
      {{else}} 
       <td>{{perm.label}}</td> 
       <td>{{input type="checkbox" checked=(mut (get type.permissions perm.code)) }}</td> 

      {{/if}} 
      {{/each}} 
     </tr> 
    {{/each}} 
    </tbody> 

</table> 

Но наблюдатель не работает.

Также я подготовил Jsbin пример - http://emberjs.jsbin.com/havaji/1/edit?html,js,output

Answer 1

Вы можете изменить булевы к объектам с Логическим свойством, чтобы вы могли правильно наблюдать значение флажка.

Контроллер:

App.IndexController = Ember.Controller.extend({ 
    testData: Ember.ArrayProxy.create({ 
     content: [ 
      { value: true }, 
      { value: false }, 
      { value: true } 
     ] 
    }), 

    //... 

Шаблон:

{{input type='checkbox' checked=data.value}} 

Наблюдатель:

arrayChanged: Ember.observer('testData.@each.value', function() { 
    console.log('changed'); 
}) 

Working demo.

Answer 2

Вы используете неправильный синтаксис для этого. hash.types.[] следует использовать только в том случае, если вы хотите наблюдать фактический массив, когда что-то добавляется или удаляется из него. Чтобы наблюдать свойство в массиве, вы получаете hash.types.@each.permissions.

allPermissionChanged: function() { 
    alert('!'); 
}.observes('hash.types.@each.permissions') 

Вы можете прочитать об этом в Ember Guides.