mardi 14 avril 2015

Observe when any Ember.ObjectController in Ember.ArrayController changes

I'm trying to set up mass-action checkboxes (for something like Delete Selected Items) in an Ember App. The idea is to make a mass-action dropdown show or hide if any one of the checkboxes are selected. I haven't put in the dropdown yet since I can't figure out how to observe all elements in the array. How can I:



  1. Set up the Array controller so it observes all client objects

  2. Get the number of checked items when it changes

  3. ALSO: Am I on track with the conventions of how I'm approaching the 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 from 'ember';
import config from './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 from 'ember';
export default Ember.Route.extend({
model: function() {
return this.store.find('client');
}
});


app/models/client.js



import DS from 'ember-data';
export default DS.Model.extend({
clientName: DS.attr('string'),
clientEmail: DS.attr('string')
});


app/controllers/clients.js



import Ember from 'ember';
export default Ember.ArrayController.extend({
checkBoxesChanged: function() {
// This fires only once, when the /clients/ route is activated
console.log('markedForDeletion in array changed');
}.observes('@each.clients')
});


app/controllers/clients/client.js



import Ember from 'ember';
export default Ember.ObjectController.extend({
markedForDeletion: true,
markedForDeletionChanged: function(){
// This fires correctly
console.log('markedForDeletion object changed');
}.observes('markedForDeletion')
});




Aucun commentaire:

Enregistrer un commentaire