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 Guides中了解更多相关信息。

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

Working demo.

Ember.js如何观察输入改变的数组键

2 个答案: