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

您正在使用錯誤的語法。 hash.types.[]只應在想要觀察實際數組時使用，只有在添加或刪除某些數據時才能使用。 要觀察數組中的屬性，請使用hash.types.@each.permissions 。

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

您可以在Ember指南中閱讀更多相關信息。

Answer 2

您可以將布爾值更改為具有布爾屬性的對象，以便您可以正確地觀察復選框的值。

控制器：

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

工作演示。