Ember.js how to observe array keys changed by input

Question

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

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
– GJK, Commented 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
– Daniel, Commented Sep 11, 2015 at 17:29

Karl-Johan Sjögren · Accepted Answer · 2015-09-11 15:28:14Z

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.

answered Sep 11, 2015 at 15:28

Karl-Johan Sjögren

17.8k7 gold badges66 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Costa Over a year ago

Can I use such constructions? '[email protected]'

Karl-Johan Sjögren Over a year ago

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.

Costa Over a year ago

Thx for help and idea!

Daniel · Accepted Answer · 2015-09-11 15:23:45Z

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.

answered Sep 11, 2015 at 15:23

Daniel

18.7k8 gold badges69 silver badges90 bronze badges

1 Comment

Costa Over a year ago

Thx u, but it doesnt work this way: emberjs.jsbin.com/kelaqu/edit?html,js,output

Collectives™ on Stack Overflow

Ember.js how to observe array keys changed by input

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related