3

I have an object with a couple dozens of settings, some settings depend on other settings, so, I need to observe if some setting changed.

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'
        }
      ]
    }
  }

});

Next I try to bind each setting to input

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

But observer doesn't work.

Also I prepared Jsbin example - http://emberjs.jsbin.com/havaji/1/edit?html,js,output

2
  • It's worth notice that you should be using Ember.Object.create({}) instead of object literals if you want the object properties to be observable.
    – GJK
    Sep 11, 2015 at 16:12
  • I have reported this as issue on Ember.js GitHub repo. github.com/emberjs/ember.js/issues/12328
    – Daniel
    Sep 11, 2015 at 17:29

2 Answers 2

3

You are using the wrong syntax for that. hash.types.[] should only be used if you want to observe an actual array, when something is added or removed from it. To observe a property in an array you you [email protected].

allPermissionChanged: function () {
  alert('!');
}.observes('[email protected]')

You can read more about it in the Ember Guides.

3
  • Can I use such constructions? '[email protected]'
    – Costa
    Sep 11, 2015 at 16:47
  • 2
    No I'm afraid not. I only works one level down after the @each. What I would do in your case is create a Component that wraps each permission editor which can then send an action up to the Controller when a value is changed. This way each Component can just watch their own permission.val. Sep 12, 2015 at 8:04
  • Thx for help and idea!
    – Costa
    Sep 12, 2015 at 9:15
1

You could change booleans to objects with boolean property so you could properly observe value of checkbox.

Controller:

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

    //...

Template:

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

Observer:

arrayChanged: Ember.observer('[email protected]', function () {
    console.log('changed');
})

Working demo.

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.