Hi, a while a go I asked how can I have a kind of global scope object that could be accessible from anywhere in the app. The obvious solution seemed to be using bindings but when you have components inside of other components things get much more complex so bindings is not an option.
A lot of people helped here, thanks to all of them especially @phillipskevin, @bmomberger-bitovi and @frank-dspeed
This is the result I came to, I did some basic tests and soon I hope to include it in my main project as is something that I really needed.
So this is the code:
// path/to/sharedInstance.js
/**
* Shared instance object
*
* Use this object to share information across components
* without the need to use bindings. Very usefull when having
* components within components and is hard to keep track of
* bindings and names for them.
*
* Include this file on your viewmodel and declare a property to access it
* Then in your stache file it will become available as well as in the VM.
*
* ```
* import DefineMap from 'can-define/map/';
* import SharedInstance from '~/path/to/sharedInstance';
* export default DefineMap.extend({ globalData: { value: SharedInstance }});
* ```
*
* use it in your stache file:
* `{{globalData.text}}`
*
* or in your vm
* `this.globalData.text = 'new value for text';`
*/
import DefineMap from 'can-define/map/';
const MyDefinition = DefineMap.extend('sharedInstanceObject', {
seal: false
}, {
_id: 'any',
text: { value: 'Default value for text' },
name: { value: 'Default value for name' },
value: { value: 1 }
});
const MyInstance = new MyDefinition();
export default MyInstance;