Yea, your approach is awfully overcomplicated. Here:
- can.Component.extend({
- tag: 'checkbox-list',
- scope: {
- list: [],
- checkAll: function() {
- this.attr('list').forEach(function( item, index, list ) {
- item.attr('checked', true);
- });
- },
- numberSelected: function() {
- var count = 0;
- this.attr('list').forEach(function( item, index, list ) {
- if(item.attr('checked')) {
- count++;
- }
- }
- },
- allSelected: function() {
- return this.attr('numberSelected') === this.attr('list.length');
- },
- noneSelected: function() {
- return this.attr('numberSelected') === this.attr('list.length');
- }
- }
- });
Within your view, you can utilize can-value="checked" to cross bind each items scope attributes with it's value. From there, you only need to interact with the scope, and don't need to do any DOM interaction, and you can compute the rest.
If you want to continue redefining what the checked attribute correlates too, you can simply modify where those values are being looked up in checkAll, and numberSelected. Within your view, you can use the attribute directly, ie: can-value="checked" instead of can-value="{{checkboxFieldValue}}", as you're overriding that anyway to match your passed scope. You can also skip initializing value, and skip the if checks for defining properties: id="{{id}}" is sufficient and preferred.