How to view the value of a component to another component


#1

I have a componentfirst.js and templatefirst.hbs. I was able to view the information called {{cashBalance}} in my templatefirst.hbs. However, when I tried to view the {{cashBalance}} in my templatesecond.hbs it views “0” it suppose to have a different value. Btw, my componentsecond.js does not have the same code with componentfirst.js. But, when i try to {{componentfirst cashBalance=cashBalance}} it doesn’t work either.


#2

Is your construction like this:

someRoute componentFirst componentSecond

Or like this:

someRoute componentFirst componentSecond ?


#3

Format fail…

Who invokes componentSecond?


#4

Hi. It is app/pods/components/componentFirst -component.js -template.hbs

and

app/pods/components/componentSecond -component.js -template.hbs


#5

Where do you store cashBalance?

If you want to have a shared state between components, you can wrap them with a shared component or use a service

{{#cash-balance as |cashBalance| }}
  {{ componentfirst cashBalance=cashBalance }}
  {{ componentsecond cashBalance=cashBalance }}
{{/cash-balance}}

or the service way

// app/pods/components/component-first/component.js
export default Component.extend({
  cashBalanceService: Ember.inject.service('cash-balance'),
  cashBalance: Ember.computed.readOnly('cashBalanceService.cashBalance')
});

// app/pods/components/component-second/component.js
export default Component.extend({
  cashBalanceService: Ember.inject.service('cash-balance'),
  cashBalance: Ember.computed.readOnly('cashBalanceService.cashBalance')
});