javascript - Observe when any Ember.ObjectController in Ember.ArrayController changes -

i'm trying set mass-action checkboxes (for delete selected items) in ember app. idea make mass-action dropdown show or hide if 1 of checkboxes selected. haven't put in dropdown yet since can't figure out how observe elements in array. how can i:

1. set array controller observes client objects
2. get number of checked items when changes
3. also: on track conventions of how i'm approaching client itemcontroller?

app/templates/clients.hbs

<section id="clients">     <h4>my clients</h4>     <ul>     {{#each itemcontroller="clients/client"}}         <li>             {{input type="checkbox" name="markedfordeletion" checked=markedfordeletion}}             {{#link-to 'clients.show' this}}                 {{clientname}}             {{/link-to}}         </li>     {{/each}}      </ul> </section> {{#link-to 'clients.new'}}add client{{/link-to}} {{outlet}} 

router.js

import ember 'ember'; import config './config/environment';  var router = ember.router.extend({   location: config.locationtype });  export default router.map(function() {   this.resource('clients', function() {     this.route('show', {path: '/:client_id'});     this.route('new');   }); }); 

app/routes/clients.js

import ember 'ember'; export default ember.route.extend({     model: function() {         return this.store.find('client');     } }); 

app/models/client.js

import ds 'ember-data'; export default ds.model.extend({   clientname: ds.attr('string'),   clientemail: ds.attr('string') }); 

app/controllers/clients.js

import ember 'ember'; export default ember.arraycontroller.extend({     checkboxeschanged: function() {     // fires once, when /clients/ route activated     console.log('markedfordeletion in array changed');   }.observes('@each.clients') }); 

app/controllers/clients/client.js

import ember 'ember'; export default ember.objectcontroller.extend({     markedfordeletion: true,     markedfordeletionchanged: function(){         // fires correctly         console.log('markedfordeletion object changed');     }.observes('markedfordeletion') }); 

edit: similar question asked here, i'm afraid answers didn't me much.

there couple of solutions this. since solution requires need property of being checked, think objectproxy meet needs. if, however, needed more functionality, component better fit.

note: before dive solution, though, it's important note arraycontroller, objectcontroller, , itemcontroller being deprecated.

since won't using itemcontroller, can remove app/controllers/clients/client.js

app/templates/clients.hbs

<section id="clients">     <h4>my clients</h4>     <ul>     {{#each clientswithmarker |client|}}         <li>             {{input type="checkbox" name="markedfordeletion" checked=client.markedfordeletion}}             {{#link-to 'clients.show' client}}                 {{client.clientname}}             {{/link-to}}         </li>     {{/each}}      </ul> </section> {{#link-to 'clients.new'}}add client{{/link-to}} {{outlet}} 

app/controllers/clients.js

import ember 'ember'; export default ember.controller.extend({     clientswithmarker: ember.computed.map('model', function(client) {         return ember.objectproxy.create({             content: client,             checked: false         });     }),      // computed property returns array of objectproxies     // checked. recalculated automatically     checkedclients: ember.computed.filterby('clientswithmarker', 'checked', true),      checkboxeschanged: function() {     // fires once, when /clients/ route activated     console.log('markedfordeletion in array changed');   }.observes('clientswithmarker.@each.checked') }); 

this should work, haven't tested specific code.