ember.js - Sync the states of multiple instances of same Ember Component -

here's situation:

i wrote component facility-search searches through fixture data. put multiple instances of {{facility-search}} on same template (tab pages). component has input boxes can write search keywords. want observe change in value of input box , update same instance of component both of them in sync.

this i'm doing in components/facility-search.js

import ember 'ember'; import em 'ember';  var facilitysearchcomponent = ember.component.extend({    // tag name appears in html   tagname: 'div',    // randomnumber   searchboxid: null,    // facilities   allfacilities: null,    // search values   textfacility: "",   textcountry: "",   textspecies: "",    // text input ids needed <label for="id"/>   // elements in multuple components should not have same id   textfacilityid: 'text-facility',   textcountryid: 'text-country',   textspeciesid: 'text-species',    // initialize ids   randomnumber: function(){     this.set('searchboxid',(math.floor(math.random() * 100) + 1));     this.set('textfacilityid', this.get('textfacilityid') + "-" + this.get('searchboxid'));     this.set('textcountryid', this.get('textcountryid') + "-" + this.get('searchboxid'));     this.set('textspeciesid', this.get('textspeciesid') + "-" + this.get('searchboxid'));   }.on('init'),    // when component inserted   didinsertelement: function() {     this.set('filteredfacilities', this.get('allfacilities'));   },    // observe search values   watchforfilterchanges: function() {     this.filterresults();   }.observes('textfacility', 'textcountry', 'textspecies'),    // filter data   filterresults: function() {     var facilities = // mechanism filter data     self.sendaction('updatefacilities', facilities);   }.on('allfacilities'),    actions: {     clearsearch: function() {       this.set('textfacility', null);       this.set('textcountry', null);       this.set('textspecies', null);       this.filterresults();     },    } });  export default facilitysearchcomponent; 

this templates/components/facility-search.hbs

<div class="card">   <div class="card-content directory-search">     <div class="card-title grey-text text-darken-3">       <h4>search facilities</h4>       <h4><small class="teal-text">{{filteredfacilities.length}} total</small></h4>     </div>     <form {{action "textsearch" on="submit" data="lol"}}>       <div class="row">         <div class="input-field col s12">           <label for="{{textfacilityid}}">search facility</label>           {{input value=textfacility type="text" id=textfacilityid label="facility name"}}         </div>         <div class="input-field col s12">           <label for="{{textcountryid}}">search country</label>           {{input value=textcountry type="text" id=textcountryid label="facility country"}}         </div>         <div class="input-field col s12">           <label for="{{textspeciesid}}">search species</label>           {{input value=textspecies type="text" id=textspeciesid label="facility species"}}         </div>       </div>     </form>     <a {{action 'clearsearch'}} class="waves-effect waves-light btn"><i class="material-icons right">clear_all</i>clear search</a>   </div> </div> 

this controllers/map.js

import ember 'ember'; import pagedarray 'ember-cli-pagination/computed/paged-array';  export default ember.controller.extend({    // facility shown in modal   selectedfacility: null,    // facilities shown in search   filteredfacilities: [],    // initialize filteredfacilities model   initializefacilities: function() {     this.set('filteredfacilities', this.get("model"));   }.observes('model'),    actions: {     showfacilityinmodal: function(facility){       this.set('selectedfacility', facility);     },     updatefacilities: function(facilities){       this.set('filteredfacilities', facilities);     },   } }); 

this routes/map.js

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

and how i'm using component in templates/map.hbs

{{facility-search allfacilities=model updatefacilities='updatefacilities'}} 

i learned if put component multiple times; have complete new instances. updating variables textfacility , others cannot observed in instance of same component. want update values in instance well. idea how can sync states of multiple instances of same component?

if understand question want share values between component if change in one, changes in other.

you can this:

  text : {     facility: "",     country: "",     species: "",   } 

instead of

  textfacility: "",   textcountry: "",   textspecies: "", 

declaring object means shares across component instances static variable.