ember.js - Undesirable scope bleed between components in Ember -

i have component [ui-button] (github) i'm adding wrapping component called ui-buttons (demo here). problem wrapping component seems receive registrations not only children all children on page! property acting static variable across instances of ui-buttons. didn't know , in case undesirable effect.

in demo link above try clicking on the "disable group" button , notice disables buttons. doing?

structurally looks this:

{{#ui-buttons |group|}}   {{ui-radio-button title='foo' group=group}}   {{ui-radio-button title='bar' group=group}}   {{ui-radio-button title='baz' group=group}} {{/ui-buttons}} 

in process have child elements (e.g., ui-radio-button) register ui-buttons. item-level registration code is:

_registration: on('init', function() {   const group = this.get('group');   if(group) {     group._registeritem(this);   } }), 

and group-level registration code is:

_registeritem: function(child) {   console.log('registering %o %o', child, this.get('elementid'), this.get('_registereditems.length'));   this.get('_registereditems').pushobject(child); }, 

if note group-level registration has "console.log" statement , produces encouraging results (it recognizes element id of group being distinct) alongside worrisome results (the registry "length" continues grow across all):

i suspect down async or this complexities i'm @ loss on how proceed.

your problem line of code

_registereditems: new a([]), 

that creates single array 1 time (i believe when component parsed - on application load) , components using it..

best bet change to

_registereditems: ember.computed(function() {    return new a([]);  }) 

when _registereditems first accessed creates new array.